[英]Detect if the user scrolled to the top or the bottom of a UL
I need to detect if the user has scrolled to the top or the bottom of the UL in a HTML Page 我需要检测用户是否在HTML页面中滚动到UL的顶部或底部
<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 >. 显然这对<ul>不起作用。 What changes should I make guys?
我应该做些什么改变?
$().scrollTop()
return how much element has been scrolled from top$().scrollTop()
返回从顶部滚动的元素数量
$().innerHeight()
return inner height of the element(without scroll)$().innerHeight()
返回元素的内部高度(不滚动)
DOMElement.scrollHeight
returns height of the content of the element(with scroll)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>
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');
}
})
Try this and let me know 试试这个,让我知道
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("End of Page");
}
});
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,并感谢您的帮助..干杯
$(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)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.