首页html 获取滚动条位置

html 获取滚动条位置

时间: 2023-10-18 21:16:01 浏览: 73

html滚动条

很简单的html滚动条，适合刚开始学习html的同学，非常实用。

可以使用 JavaScript 中的 `scrollY` 属性来获取垂直滚动条的位置。例如： ```html <!DOCTYPE html> <html> <head> <title>获取滚动条位置</title> <style> .container { height: 1000px; } </style> </head> <body> <div class="container"> <p>这是一个高度为 1000px 的容器。</p> <p>滚动条位置： <span id="scrollPos"></span></p> </div> <script> const scrollPosElement = document.getElementById('scrollPos'); window.addEventListener('scroll', () => { const scrollPos = window.scrollY; scrollPosElement.innerText = scrollPos; }); </script> </body> </html> ``` 在上述代码中，我们使用 `window.scrollY` 来获取垂直滚动条的位置，并通过监听 `scroll` 事件来实时更新页面上展示的滚动条位置。

阅读全文