如何处理html页面的滚动事件

想实现当用户将页面滚动到底部时,应用显示返回顶部的按钮(之前是隐藏的)。为了实现这个功能需要跟踪页面的滚动事件,需要判断页面是否已经滚动到了底部。查了一下相关文档,碰到了问题,判断滚动事件,用body.onscroll还是window.onscroll,为什么?判断滚动的位置,用body.scrollTop,document.document.scrollTop,还是window.scrollY,为什么?不同浏览器实现的方式不一样吗?是否用DOCTYPE也有影响?

叮当猫咪
浏览 493回答 1
1回答

慕盖茨4494581

原生JavaScript: $(window).scroll(function(event){       var wScrollY = window.scrollY; // 当前滚动条位置         var wInnerH  = window.innerHeight; // 设备窗口的高度(不会变)         var bScrollH = document.body.scrollHeight; // 滚动条总高度             if (wScrollY + wInnerH >= bScrollH) {                     console.log("到底了.");     }     });JQuery :$(window).scroll(function () {    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {                 console.log("到底了.");     } });原理都是一样的:滚动底部的条件是: 滚动的高度 + windows 窗口高度 >= 滚动条总高度
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript