13

Webページのデフォルトのスクロール速度、量、および慣性を変更しようとしています.Googleでよく検索しますが、無駄です

幸いなことに、後日、ウェブページ全体ではなく、特定の 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 );
}

時間、距離を設定できます (また、イージング メソッドを追加することもできます)。フィドルの完全な例を参照してください。

于 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 に答える