13

我正在尝试更改网页的默认滚动速度，数量和惯性。我谷歌了很多，但徒劳无功

幸运的是，今天晚些时候，我发现了一个插件，它允许我们只在特定的 div 标签内而不是在整个网页中更改滚动速度、数量、惯性。

这是一个基本代码 

    $(".I-WILL-APPLY-ONLY HERE").mCustomScrollbar({
 set_width:false, 
set_height:false, 
 horizontalScroll:false, 
scrollInertia:550, 
 SCROLLINERTIA:"easeOutCirc", 
 mouseWheel:"auto", 
  autoDraggerLength:true, 
    scrollButtons:{ 
enable:false, 
       scrollType:"continuous", 
     SCROLLSPEED:20, 
      SCROLLAMOUNT:40 
     },
    advanced:{
updateOnBrowserResize:true, 
   updateOnContentResize:false, 
      autoExpandHorizontalScroll:false, 
    autoScrollOnFocus:true 
   },
           callbacks:{
     onScrollStart:function(){}, 
    onScroll:function(){}, 
onTotalScroll:function(){}, 
    onTotalScrollBack:function(){}, 
   onTotalScrollOffset:0, 
whileScrolling:false, 
       whileScrollingInterval:30 
 }
   });



<div id="I-WILL-APPLY-ONLY HERE" class="I-WILL-APPLY-ONLY HERE">
A basic height in pixels would be defined for this element and any content appearing here will have a different scrollspeed,inertia.Mentioning heignt of this div element is compulsary,else i wont show the output    </div>

问题是我想要整个页面，而不仅仅是特定的 div 元素。任何帮助将不胜感激。请帮助我

提前致谢

4

3 回答 3

11

您可以使用 jQuery 来做到这一点，看看我的小提琴：http: //jsfiddle.net/promatik/NFk2L/

您可以添加滚动事件的事件侦听器，请注意您可能会阻止滚动的默认操作... if (event.preventDefault) event.preventDefault();

然后该事件的处理程序，使用 jQuery animate，将执行滚动...

function handle(delta) {
    var time = 1000;
    var distance = 300;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time );
}

您可以设置时间、距离（也可以添加缓动方法），请参阅fiddle中的完整示例

于 2013-01-20T23:31:01.913 回答
1

为什么不将您的 HTML 包装在容器 div 中并定位它，如下所示：

<div class="container">
  <div id="I-WILL-APPLY-ONLY HERE" class="I-WILL-APPLY-ONLY HERE">
<!-- Content here -->
  </div>
</div>

然后在 jQuery 中定位您的容器类：

$('.container').mCustomScrollbar...
于 2013-01-20T23:02:12.573 回答
1

我适应平滑的元素工作：Codepen

$('.smooth').on('mousewheel', function(e){
  wheel(e.originalEvent, this)
})

function wheel(event, elm) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle(delta, elm);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle(delta, elm) {
    var time = 1000;
      var distance = 100;

    $(elm).stop().animate({
        scrollTop: $(elm).scrollTop() - (distance * delta)
    }, time );
}
于 2018-07-11T20:12:56.003 回答