Javascript 检测用户是否滚动到 UL 的顶部或底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33184101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if the user scrolled to the top or the bottom of a UL
提问by Dinuka Jay
I need to detect if the user has scrolled to the top or the bottomof the ULin a HTML Page
我需要检测，如果用户已经滚动到顶部或底部的的UL在一个HTML页面
<ul id="color-list">
<li>Red</li>
<li>Blue</li>
<li>Purple</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>White</li>
</ul>
I use this code to detect if the user scrolled to the bottom of the page:
我使用此代码来检测用户是否滚动到页面底部：
window.onscroll = function(evt) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
alert("End of Page") ;
}
}
Obviously this won't work for the < ul >. What changes should I make guys?
显然这对 < ul > 不起作用。伙计们，我应该做出哪些改变？
回答by Rayon
$().scrollTop()return how much element has been scrolled from top
$().innerHeight()return inner height of the element(without scroll)
DOMElement.scrollHeightreturns height of the content of the element(with scroll)
$().scrollTop()返回从顶部滚动了多少元素
$().innerHeight()返回元素的内部高度（无滚动）
DOMElement.scrollHeight返回元素内容的高度（带滚动）
$('#color-list').on('scroll', function() {
var scrollTop = $(this).scrollTop();
if (scrollTop + $(this).innerHeight() >= this.scrollHeight) {
$('#message').text('end reached');
} else if (scrollTop <= 0) {
$('#message').text('Top reached');
} else {
$('#message').text('');
}
});#message {
font-weight: bold;
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="color-list" style="height: 150px;overflow-y: scroll">
<li>Red</li>
<li>Blue</li>
<li>Purple</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>White</li>
<li>Red</li>
<li>Blue</li>
<li>Purple</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>White</li>
<li>Red</li>
<li>Blue</li>
<li>Purple</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>White</li>
<li>Red</li>
<li>Blue</li>
<li>Purple</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>White</li>
<li>Red</li>
<li>Blue</li>
<li>Purple</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>White</li>
<li>Red</li>
<li>Blue</li>
<li>Purple</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>White</li>
</ul>
<div id='message'></div>回答by Victor Luna
So you can take the sum of scrollTop() and innerHeight(), and when they are equal to the scrollHeight() the alert is sent:
因此，您可以取 scrollTop() 和 innerHeight() 的总和，当它们等于 scrollHeight() 时，将发送警报：
$('#color-list').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
alert('End of List');
}
})
回答by Victor Luna
Try this and let me know
试试这个，让我知道
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("End of Page");
}
});
回答by Djordje Arsenovic
I followed your example and this is just simpler solution if you need to check is it to the top, I needed some check to scroll to top, so here is a little changed code, maybe for someone it will be helpful:
我按照你的例子，如果你需要检查它是否到顶部，这只是更简单的解决方案，我需要一些检查才能滚动到顶部，所以这里有一些更改的代码，也许对某人会有所帮助：
jQuery(document).ready(function () {
jQuery(window).on('scroll', function () {
var vLogo = jQuery(".header-logo-wrap");
var scrollTop = jQuery(this).scrollTop();
vLogo.addClass('logoOnScroll');
if (scrollTop === 0) {
vLogo.removeClass('logoOnScroll');
}
});
});
So just check if it is 0, and thanks for help.. Cheers
所以只需检查它是否为 0，并感谢您的帮助..干杯
回答by Vic.Liu
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// when scroll to bottom of the page
console.log("bottom")
}
console.log("scrollHeight:"+scrollHeight)
});
