jQueryスライダとページスクロールの動作をまとめます。

Question

アニメーションの水平jQueryスライダを連結して垂直ページのスクロールを可能にしています。逆も同様です。私はいくつかの問題にぶつかりつつあります。

まず、スライダがドラッグされると（クリックされているのとは対照的に）スライダが一時停止してからドラッグの反対方向に移動し、適切な方向に移動します。これはアニメーションの可能性が高いですが、アニメーションを維持してスムーズにスクロールさせる方法はわかりません。

$("#mb-reader-scrubber-bar").slider({ 
    animate: "slow", 
    slide: function(event, ui) { 
     var height = getPageHeight(), 
     position = getSliderPosition(ui); 
    }, 
    stop: function(event, ui) { 
     var height = getPageHeight(), 
     position = getSliderPosition(ui); 
     console.log('stoppped'); 
     scubberSliding = false; 
     $('body').animate({ 
     scrollTop: height * position 
     }, "slow"); 
    } 
}); 

2ページ目に、それは遅いアニメーションを使用して移動させ、スクロールだけでなく、スローでも移動するスライダーをトリガするように、私は垂直ページスクロールに取り組む同じ遅い、アニメーション効果を得ることができませんアニメーション。私はスクロールイベントのウィンドウをアニメーション化する方法とスライダが（スライダの初期化の多くの異なる組み合わせを試した後に）アニメーション化していない理由がわかりません。ここで

$(window).scroll(function() { 
    var height = getPageHeight(), html_scrolltop = getScrollTop(); 
    var perc = Math.floor((html_scrolltop/height) * 100); 

    $("#mb-reader-scrubber-bar").slider("option", { 
     animate: "slow", 
     value: perc 
    }); 
}); 

はplunkです：これが達成される可能性がありますどのようにhttp://plnkr.co/edit/jF3iWa?p=preview

任意の提案をいただければ幸いです。

Answer 1

私はイベントの種類をチェックして、アニメーション化することにより、この問題の＃1を解決することができたかどうか：

if(event.originalEvent.type === "mousedown") { 
    $('body').animate({ scrollTop: height * position}, "slow"); 
} else { 
    $('body').scrollTop(height * position); 
} 

問題＃2のためにここで行われるものと終値がありませんので、これは必須ではありませんこの質問。