1

iScroll4 フレームワークを使用すると、タッチ オペレーティング システムで互換性のあるスクロール div を使用できます。さらに、onClick で 240px ジャンプする矢印が両側にあります。これは、CSS3 をサポートしていないブラウザー用です。

問題は、タッチスクリーン オペレーティング システムでスクロールしてから矢印を押すと、これを行う前の場所にスクロールして戻り、240px 進むことです。

その理由は、iScroll がグローバル変数オフセットに情報を提供しないためです。

方法は、JQuery の .Scroll() メソッドを使用して、div のスクロールがいつ終了したかを判断し、グローバル変数を更新することだと思います。これを達成する方法は別の話です。

ここにフィドルがあります。左と右への矢印として L & R ボタンを使用し、CSS3 ブラウザーを使用している場合は、ドラッグして、これらのボタンの 1 つを押したときに何が起こるかを確認してください。 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'));

パフォーマンステストから、2番目の方法は最初の方法よりもほぼ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);
     });
});
于 2011-06-23T15:39:11.977 に答える