生活随笔
收集整理的這篇文章主要介紹了
JS滚动条位置，顶部，底部，触发事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>JS滾動條位置，頂部，底部，觸發事件
</title></head><body><style>body {margin: 0;padding: 0;height: 200vh;}</style><script>function getScrollTop() {var scrollTop = 0,bodyScrollTop = 0,documentScrollTop = 0;if (document.body) {bodyScrollTop = document.body.scrollTop;}if (document.documentElement) {documentScrollTop = document.documentElement.scrollTop;}scrollTop =bodyScrollTop - documentScrollTop > 0? bodyScrollTop: documentScrollTop;return scrollTop;}console.log("被卷曲的頭",document.body.scrollTop,document.documentElement.scrollTop);function getWindowHeight() {var windowHeight = 0;if (document.compatMode == "CSS1Compat") {windowHeight = document.documentElement.clientHeight;} else {windowHeight = document.body.clientHeight;}return windowHeight;}console.log("客戶端可視區域高度",document.body.clientHeight,document.documentElement.clientHeight);function getScrollHeight() {var scrollHeight = 0,bodyScrollHeight = 0,documentScrollHeight = 0;if (document.body) {bodyScrollHeight = document.body.scrollHeight;}if (document.documentElement) {documentScrollHeight = document.documentElement.scrollHeight;}scrollHeight =bodyScrollHeight - documentScrollHeight > 0? bodyScrollHeight: documentScrollHeight;return scrollHeight;}console.log("文檔總高度",document.body.scrollHeight,document.documentElement.scrollHeight);window.onscroll = function() {if (getScrollTop() == 0) {console.log("頂部");}if (getScrollTop() + getWindowHeight() == getScrollHeight()) {console.log("已經到最底部了！!");}};</script></body>
</html>
總結
以上是生活随笔為你收集整理的JS滚动条位置，顶部，底部，触发事件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
