web-dev-qa-db-ja.com

ウェブページのデフォルトのscrollspeed、scrollamount、scrollinertiaを変更する方法

私はウェブページのデフォルトのスクロール速度、量、慣性を変更しようとしています。私はたくさんグーグルしますが、無駄です

幸いなことに、後で、この日、私は プラグイン を見つけました。これにより、スクロール速度、量、慣性を特定のdivタグ内でのみ変更でき、Webページ全体では変更できません。

これが基本的なコードです

    $(".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要素だけでなく、ページ全体が必要なことです。助けていただければ幸いです。助けてください。

前もって感謝します

jqueryhtmljquery-uijquery-plugins
13
Rahul Shah

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 の完全な例を参照してください。

10
António Almeida

要素の動作をスムーズにするための私の適応： 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 );
}
1
Hermann Pessoa

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...
1
Calum Gunn