我怎么发现如果用户在滚动容器滚动到顶部或下到谷底?
jQuery的是否提供任何机制?
CSS:
#container {
display: block;
width: 250px;
height: 25px;
background: green;
}
#scrolling {
width: 250px;
height: 300px;
backround: red;
overflow: auto;
}
http://jsfiddle.net/Hmaf2/2/
非常感谢!
拍
您可以测试滚动位置比较高度,滚动的高度和DIV的滚动偏移量:
$(document).ready(function(){
$('#scrolling').scroll(function(){
var scrollTop = $(this).scrollTop();
var iheight = $(this).innerHeight();
var sheight = this.scrollHeight;
var text = '';
if (scrollTop <= 5) {
text = 'top';
}
else if (scrollTop+5 >= sheight-iheight) {
text = 'bottom';
}
else {
text = scrollTop+' middle ('+iheight+','+sheight+')';
}
$('#result').text(text);
});
});
小提琴
本实施例中已经保留了来自div的边缘的顶部和底部5个像素。
$('#somediv').scrollTop()
会告诉你从顶部位置
-编辑-
$('#somediv').scroll(function(){
if($('#somediv').scrollTop()==0){
console.log('top')
}
})
是的,你可以访问当前滚动顶部滚动容器的价值。
在这里工作是的jsfiddle。
$('#scrolling').scroll(function() {
var scrollTop = $(this).scrollTop();
console.log(scrollTop);
});
文章来源: How to find out if the user scrolled to the end of a HTML container with jQuery?