链接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的滑块，共同

回答

相关问题