1

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

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

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

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

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

任何想法如何排序。

奇妙

4

1 回答 1

0

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

如果您有权访问何时调用 $.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,

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

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

编辑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);
     });
});
于 2011-06-23T15:39:11.977 回答