JS 获取滚动条当前状态

在JavaScript中，判断一个元素是否无法滚动（即已经滚动到顶部或底部），可以通过检查该元素的scrollTop属性与scrollHeight和clientHeight之间的关系来实现。scrollTop表示元素内部被卷上去的高度，scrollHeight是元素内容的总高度（包括不可见部分），而clientHeight是元素内部的高度，包括padding但不包括border、margin、horizontal scrollbar（如果存在的话）、或::before/::after伪元素的高度。

判断元素是否滚动到顶部

如果元素已经滚动到顶部，那么scrollTop的值应该为0（或者非常接近0，考虑到可能的浮点数精度问题）。

function isScrolledToTop(element) {
    return element.scrollTop === 0;
}

判断元素是否滚动到底部

要判断元素是否滚动到底部，可以比较scrollTop加上clientHeight是否等于或大于scrollHeight。

function isScrolledToBottom(element) {
    return element.scrollTop + element.clientHeight >= element.scrollHeight;
}

示例

以下是一个简单的示例，展示了如何在一个可滚动的div元素上应用这些函数：

HTML:

<div id="scrollableDiv" style="height: 200px; overflow-y: auto;">
    <!-- 足够的内容以使其可滚动 -->
    <div style="height: 1000px;">滚动内容...</div>
</div>
<button onclick="checkScroll()">检查滚动位置</button>

JavaScript:

function checkScroll() {
    var scrollableDiv = document.getElementById('scrollableDiv');
    if (isScrolledToTop(scrollableDiv)) {
        console.log('已经滚动到顶部');
    } else if (isScrolledToBottom(scrollableDiv)) {
        console.log('已经滚动到底部');
    } else {
        console.log('在中间位置');
    }
}

function isScrolledToTop(element) {
    return element.scrollTop === 0;
}

function isScrolledToBottom(element) {
    return element.scrollTop + element.clientHeight >= element.scrollHeight;
}

在这个示例中，我们有一个可滚动的div元素，并添加了一个按钮来检查该元素当前的滚动位置。点击按钮时，会调用checkScroll函数，该函数使用isScrolledToTop和isScrolledToBottom函数来判断元素是否滚动到了顶部或底部，并打印相应的消息到控制台。