jquery - 检测可滚动 DIV 中的当前位置

Question

使用 iScroll4 框架，我们在触摸操作系统上有兼容的滚动 div。此外，我们在两侧都有箭头，在点击时会跳转 240 像素。这适用于不支持 CSS3 的浏览器。

问题是，当一个人在触摸屏操作系统上滚动然后按下箭头时，它会滚动回到他们这样做之前的位置，然后前进 240 像素。

原因是因为iScroll 没有向我的全局变量offset 提供信息。

我认为出路是使用 JQuery 的 .Scroll() 方法来确定 div 何时完成滚动，然后更新全局变量。如何实现这一点是另一回事。

这是一个 fiddle 。使用 L & R 按钮作为向左和向右的箭头，对于那些使用 CSS3 浏览器的人来说，做一些拖动，然后看看当你按下其中一个按钮时会发生什么。 http://jsfiddle.net/Agp74/5/

关于如何对此进行排序的任何想法。

很棒

Answer 1

一些提示，因为我不得不写一些几乎相同的东西:

如果您有权访问 $.animate() 何时被调用，您可以使用 step 属性添加一个函数:http://api.jquery.com/animate/

我构建的滚动条使用 left 属性来控制内部 div 的位置:

<div id="#outside">
    <div id="#partThatSlides">Content Content Content ...</div>
</div>

我发现我可以通过执行以下任一方法来获取当前 slider 位置:

var trueLeft = $('#partThatSlides').offset().left - $('#outside').offset().left;

或

var trueLeft = parseInt($('#partThatSlides').attr('left'));

通过性能测试，我发现第二种方法比第一种方法快 20-50 倍

编辑:

从您正在使用的插件的来源来看，您似乎可以绑定(bind)到这些事件之一:

        onBeforeScrollStart: function (e) { e.preventDefault(); },
        onScrollStart: null,
        onBeforeScrollMove: null,
        onScrollMove: null,
        onBeforeScrollEnd: null,
        onScrollEnd: null,
        onTouchEnd: null,

我猜你可以在那里执行你的逻辑。

我会将你的滚动条的构造移动到与你的“全局”(但不是真正的全局)变量相同的闭包范围内，所以你有这样的东西:

编辑2:

这是工作代码

$(document).ready(function(){
    var myScroll2,
        offset = 0;

    function scrollHandler() {
        if(this.x || this.x === 0) {
            offset = this.x
        }
    };


    myScroll2 = new iScroll('bkdates', {
        snap: 'div',
        useTransform: false,
        momentum: false,
        hScrollbar: false,
        vScrollbar: false,
        onScrollMove: scrollHandler,
        onScrollEnd: scrollHandler
    });

    $( '#bkarrowsr' ).mouseup( function() {
        offset -= (48 * 5);
            if ( offset < -(85 * 48) ) {
            offset = -(85 * 48); // don't exceed this limit
         }
         myScroll2.scrollTo(offset,0,400);   
    });
    $( '#bkarrowsl' ).mouseup( function() {
        offset += (48 * 5);
        if ( offset > 0 ) {
            offset = 0; // don't exceed this limit
            }
         myScroll2.scrollTo(offset,0,400);
     });
});