Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
429 views
in Technique[技术] by (71.8m points)

javascript - 检查用户是否已滚动到底部(Check if a user has scrolled to the bottom)

I'm making a pagination system (sort of like Facebook) where the content loads when the user scrolls to the bottom.(我正在创建一个分页系统(有点像Facebook),当用户滚动到底部时,内容会加载。)

I imagine the best way to do that is to find when the user is at the bottom of the page and run an ajax query to load more posts.(我想最好的方法是找到用户位于页面底部并运行ajax查询以加载更多帖子。) The only problem is I don't know how to check if the user has scrolled to the bottom of the page with jQuery.(唯一的问题是我不知道如何检查用户是否已使用jQuery滚动到页面底部。) Any ideas?(有任何想法吗?) I need to find a way to check when the user has scrolled to the bottom of the page with jQuery.(我需要找到一种方法来检查用户何时使用jQuery滚动到页面底部。)   ask by Johnny translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Use the .scroll() event on window , like this:(在window上使用.scroll()事件,如下所示:)

$(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { alert("bottom!"); } }); You can test it here , this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content ( document ).(您可以在此处进行测试 ,这将采用窗口的顶部滚动,因此向下滚动多少,添加可见窗口的高度并检查它是否等于整个内容( document )的高度。) If you wanted to instead check if the user is near the bottom, it'd look something like this:(如果你想检查用户是否接近底部,它看起来像这样:) $(window).scroll(function() { if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { alert("near bottom!"); } }); You can test that version here , just adjust that 100 to whatever pixel from the bottom you want to trigger on.(你可以在这里测试那个版本 ,只需将100调整到你想要触发的底部的任何像素。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...