我需要检测用户是否滚动到页面底部。如果它们在页面的底部，当我在底部添加新内容时，我会自动将它们滚动到新的底部。如果他们不在底部，他们正在阅读页面上更高的先前内容，所以我不想自动滚动他们，因为他们想呆在那里。
我如何检测用户是否滚动到页面的底部，或者他们是否在页面上滚动得更高?
当前回答
你可以使用我们的NPM包 (它的完美滚动条，但我们做了一些调试) 链接: https://www.npmjs.com/package/@nima2142/vue2-perfect-scrollbar
<perfect-scrollbar @ps-y-reach-end="myFunction">
<!-- your code-->
</perfect-scrollbar>
其他回答
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
看到演示
最简单的方法使用香草javascript
container.addEventListener('scroll', (e) => {
var element = e.target;
if (element.scrollHeight - element.scrollTop - element.clientHeight <= 0) {
console.log('scrolled to bottom');
}
});
你可以使用我们的NPM包 (它的完美滚动条，但我们做了一些调试) 链接: https://www.npmjs.com/package/@nima2142/vue2-perfect-scrollbar
<perfect-scrollbar @ps-y-reach-end="myFunction">
<!-- your code-->
</perfect-scrollbar>
我为移动设备和桌面尝试了这个功能，这对我来说是工作，这里的一些评论在移动/Android设备上不起作用，顺便说一句，谢谢你的问题。程序员们，坚持下去吧!
window.addEventListener("scroll", function(el) {
const scrollY = window.scrollY + window.innerHeight + 2;
const bodyScroll = document.body.offsetHeight;
console.log("Scroll Y : " + scrollY);
console.log("Body : " + bodyScroll);
if(scrollY >= bodyScroll){
alert("Bottom Page");
}
})
const handleScroll = () => {
if (Math.round(window.scrollY + window.innerHeight) >= Math.round(document.body.scrollHeight)) {
onScroll();
}
};
这段代码在Firefox和IE中也适用。
