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滚动条位置，顶部，底部，触发事件相关推荐

vue滚动条滚到到底部触发的方法
1.设置需要滚动的盒子首先要有滚动条 overflow-y:auto 或overflow-y: scroll; 然后设置事件@scroll="scrollEvent" 方法名自 ...
JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
jquery滚动条到底部触发事件
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)var nScrollTop = 0; //滚动到的当前位置var nDivHight = $("#hot ...
js 动态加载select触发事件
动态加载select后,手动调用一下 subjectChange函数,模拟触发change事件 function hallidChange(value) {$.ajax({type: "po ...
JS页面加载完成触发事件
2019独角兽企业重金招聘Python工程师标准>>> JS window.οnlοad=function(){ //do something } <script type= ...
html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别按钮 var test = function(){ var span = document.createElement("span&q ...
EXTJS 6 Grid 滚动到底部触发事件（如：加载数据）
给grid增加个listeners 监听 viewready listeners : {afterrender : function() {},viewready: function () {gri ...
js 多选框被选中触发的事件_JS实现select选中option触发事件操作示例
本文实例讲述了JS实现select选中option触发事件操作.分享给大家供大家参考,具体如下: 我们在用到下拉列表框select时,需要对选中的选项触发事件,其实本身没有触发事件方法,我们只有在se ...
如何用堆栈来保存和恢复滚动条位置
问题背景在单页应用中,翻页一般通过display:none将先前的面板(一般就是个div容器)隐藏,然后将本次需要展现的面板设置成display:block(当然,还可能加点css切换动画,不过不影 ...

JS滚动条位置，顶部，底部，触发事件

JS滚动条位置，顶部，底部，触发事件相关推荐

最新文章

热门文章