1

YUI scrollviewを利用して、タッチ、フリック、矢印によるメニュー構築を行いました。しかし、なぜか矢印にはバグがあります。

ページが初めて読み込まれると正常に動作しますが、ユーザーがマウスまたはスワイプ (タブレットまたは電話) でページをスクロールするとすぐに、矢印が機能しなくなります。コンテンツをスワイプすると、矢印が魔法のように動き出し、再び機能します。

これは、scrollView に使用するスクリプトです。

YUI().use('scrollview-base', 'scrollview-paginator', function(Y) {

    var scrollView = new Y.ScrollView({
        id: "scrollview",
        srcNode : '#clientslider-content',
        width : 950,
        flick: {
            minDistance: 10,
            minVelocity: 0.3,
            axis: "x"
        }
    });

    scrollView.plug(Y.Plugin.ScrollViewPaginator, {
        selector: 'li'
    });

    scrollView.render();


    var content = scrollView.get("contentBox"); 
    var scrollViewCurrentX = $('#clientslider-content').offset();

    content.delegate("click", function(e) {

        var scrollViewNewX = $('#clientslider-content').offset();
        var scrollMarginL = (scrollViewNewX.left-2);
        var scrollMarginR = (scrollViewNewX.left+2);

        if (scrollViewCurrentX.left < scrollMarginL || scrollViewCurrentX.left > scrollMarginR)
        {
            e.preventDefault();
        }               
    }, ".clientlink");

    content.delegate("mousedown", function(e) {
        scrollViewCurrentX = $('#clientslider-content').offset();               
        e.preventDefault();            
    }, "a, img");

    Y.one('#clientslider-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
    Y.one('#clientslider-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));

});

ここでデモを見つけることができます: http://www.circlesoftware.nl/demo/test.html

再現するには: - ページをロードします - 右ボタンを押します (他に何もしないでください) - マウスで下にスクロールします - 矢印が壊れています 修正するには: - スライダーのコンテンツをつかみ、スワイプします - 左または右を試しますボタンを押すと、再び機能します

ここで何が問題なのか誰にもわかりませんか?

4

1 に答える 1