使用JS获取设置了overflow-y: auto的div滚动条距离底部的距离

回答：

要获取一个设置了 overflow-y: auto 的 div 的滚动条与 div 最底部的距离，你可以使用 JavaScript 来计算。具体来说，你需要获取 div 的 scrollHeight、scrollTop 和 clientHeight 属性，然后进行计算。

以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Distance</title>
    <style>
        #myDiv {
            width: 300px;
            height: 200px;
            overflow-y: auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <!-- 内容可以是任意的，只要足够多以产生滚动条 -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.</p>
    </div>

    <script>
        function getScrollDistanceToBottom(div) {
            const scrollHeight = div.scrollHeight;
            const scrollTop = div.scrollTop;
            const clientHeight = div.clientHeight;
            return scrollHeight - scrollTop - clientHeight;
        }

        const myDiv = document.getElementById('myDiv');
        myDiv.addEventListener('scroll', () => {
            const distanceToBottom = getScrollDistanceToBottom(myDiv);
            console.log('Distance to bottom:', distanceToBottom);
        });
    </script>
</body>
</html>

在这个示例中，我们定义了一个 getScrollDistanceToBottom 函数，它接受一个 div 元素作为参数，并返回滚动条与 div 最底部的距离。我们通过监听 div 的 scroll 事件来实时获取这个距离，并在控制台中输出。

你可以根据需要修改这个示例代码，以适应你的具体需求。

使用JS获取设置了overflow-y: auto的div滚动条距离底部的距离

由 ChatGPT4o 使用 ChatGPT 4o 回答