Question

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

问题在于，当一个人在触摸屏操作系统上滚动然后按下箭头时，它会滚动回到它们执行此操作之前的位置然后前进240px。

原因是因为iScroll不向我的全局变量偏移量提供信息。

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

这是一个小提琴。使用L＆amp; 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>

我发现我可以通过以下任一方法获取当前滑块位置：

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

或

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

从性能测试中我发现第二种方法比第一种方法快20-50倍

编辑：

从您使用的插件源看起来，您可以参与其中一个事件：

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

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

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

EDIT2：

这是工作代码

$(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);
     });
});

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

1 个答案: