Question

我想改变网页的默认滚动速度，数量和惯性。我谷歌很多，但是徒劳无功

幸运的是，今天晚些时候，我发现a plugin允许我们仅在特定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元素。任何帮助都将不胜感激。请帮助我

提前致谢

Answer 1

您可以使用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

中的完整示例

Answer 2

为什么不将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...

Answer 3

我适应平滑的元素工作：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 );
}

如何更改网页的默认scrollspeed，scrollamount，scrollinertia

3 个答案: