鏈接jQuery的滑塊，共同

我想鏈在一起的動畫，jQuery的橫向滑動，以使垂直滾動頁面和，反之亦然頁面滾動的行爲，具有垂直頁面滾動相應地移動滑塊。我遇到了一些我不太確定如何解決的問題。鏈接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"); 
    } 
});

其次，我不能得到相同的速度慢，動畫效果在垂直頁面滾動工作，使網頁上滾動它使用移動緩慢的動畫，以及觸發滑塊移動也慢動畫。我不知道如何製作動畫的滾動事件，爲什麼滑塊沒有動畫（試圖滑塊初始化的許多不同組合後）的窗口。

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

這裏是普拉克：http://plnkr.co/edit/jF3iWa?p=preview

就如何實現這一可能實現任何建議，將不勝感激。

來源

2017-08-29 lance-p

我可以通過檢查事件類型，然後動畫或不是解決問題＃1：

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

問題＃2，這不是必需的，這樣有什麼可以在這裏完成和結束這個問題。

來源

2017-08-31 13:39:39

鏈接jQuery的滑塊，共同

回答

相關問題