使用jQuery检测水平滚动div的结尾
所以,我的div中有一些数据.它按日期分为几大块.它使用jQuery和mousewheel插件进行水平滚动.
So, I've got some data tossed in a div. It's split up into chunks by date. It scrolls horizontally with the use of jQuery and the mousewheel plugin.
我需要在div到达终点(即最左侧,最右侧)时触发一个事件.我认为,通过检测mousewheel插件中提取的数据,当前实现的方式可以计算何时无法进一步滚动.我只需要向正确的方向轻推即可.这是为我做水平滚动的代码:
I need to fire an event when the div has reached it's terminal point (farthest left, farthest right). I think that it is possible with the way it is currently implemented to calculate when you cannot scroll any further by detecting the data fetched in the mousewheel plugin. I just need a nudge in the right direction. Here's the code that does the horizontal scrolling for me:
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function (event) {
$(this).data('down', false);
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 30);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
});
有人可以给我一些指导吗?谢谢!
Can anybody give me some direction? Thanks!
嘿,我已经为您准备了实现的页面.您可以看到如何使用jQuery检测滚动区域的结尾.
Hey, I've prepared a page for you with the implementation. You can see how to detect the end of scrolling area with jQuery.
对于整个文档,您必须在javascript中检测.scrollTop
是否等于.scrollHeight
.使用jQuery可以检测:
For the document as a whole you must detect in javascript whether .scrollTop
has become equal to .scrollHeight
. With jQuery it would be to detect:
if ( $(document).scrollTop() == ( $(document).height() - $(window).height() ) {
// Do something here ...
}
宽度也一样.在div
此处 中查看示例.
The same is done for width. Have a look on example with div
here.