如何检查滚动条是否位于底部?使用JQuery或JavaScript如何检查滚动条是否在底部
回答
您会找到滚动容器的高度,然后将其与滚动位置进行比较。如果它们是相同的,那么你已经达到了底部。
<div style="overflow: auto; height: 500px">
</div>
$(document).ready(function()
{
$('div').scroll(function()
{
var div = $(this);
if (div.height() == div.scrollTop() + 1) //scrollTop is 0 based
{
alert('Reached the bottom!");
}
});
});
编辑:在js小提琴中的一个小测试,我意识到以前的版本是不正确的。 可以使用DOM属性来找出有多少滚动与元素的高度,像这样
var div = $(this);
if (div[0].scrollHeight - div.scrollTop() == div.height())
{
alert('Reached the bottom!');
}
[scrollHeight直到第8版才被引入到IE中](https://developer.mozilla.org/en/DOM/element.scrollHeight#Browser_compatibility) –
@DavidHedlund如果他正在寻找IE 6和7兼容的方法,那么这是行不通的,你是对的。他没有提供关于浏览器支持要求的任何细节。 –
这不适用于我 - 但是,如果我将它与div.innerHeight进行比较,它就会起作用。我假设保证金/填充是以这种方式进行的?我不完全确定。 – GlyphGryph
您可以检查执行一些数学如果元素scrollTop
等于元素innerHeight
。
if($('div').scrollTop() == $('div').innerHeight()){
//Reached the bottom
}
这为我工作(使用jQuery):
$(document).ready(function(){
$('div').scroll(function(){
//scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight
if(this.scrollTop == (this.scrollHeight - this.offsetHeight)) {
console.log("Top of the bottom reached!");
}
});
});
从here服用。
采取从这里。帮助我,因为我期待:) –
- 1. 检查UIWebView是否滚动到底部
- 2. 如何检测滚动条是否在最底部?
- 3. 如何检查滚动是Angular 4底部的底部?
- 4. 如何知道滚动条是否在元素的底部
- 5. 检测WPF listview滚动条在底部?
- 6. 检查用户是否滚动到顶部或底部
- 7. 底部滚动条
- 8. 如何检查用户是否在.NET中滚动到WebBrowser控件的底部?
- 9. 检查底部是否达到滚动视图的方法
- 10. 检查用户是否已滚动到Angular 2的底部
- 11. 如何使用JQuery检查div是否一直滚动到底部?
- 12. 检查滚动条是否可以在WebBrowser中集中/滚动
- 13. 避免底部滚动条
- 14. 如何检测滚动到底部
- 15. 当滚动条底部滚动到底部
- 16. 如何修复滚动条总是在一个div的底部.....?
- 17. 如何修复滚动条总是在一个div的底部?
- 18. 如何设置垂直滚动条总是在底部?
- 19. JQuery检测滚动底部
- 20. 如何检查网页是否滚动?
- 21. 如何检测客户端是否滚动到网页的顶部或底部?
- 22. 离子 - 如何确定滚动是否在内容的底部
- 23. 检查Windows窗体滚动条是否一直向下滚动?
- 24. 如何检查WPF DataGrid中当前是否显示滚动条?
- 25. 如何检查滚动条是否可见?
- 26. 是否有可能使底部滚动条固定?
- 27. 滚动查看不滚动到底部
- 28. 滚动条在页面底部变暗
- 29. 我要在底部滚动条
- 30. 检查用户是否正在滚动,如果没有,则将滚动位置设置为底部
你尝试过什么吗? – meo
是的,但它不工作 – redoc01
水平滚动条或垂直滚动条? –