スクロールバーのアニメーションスクロール

Question

jqueryでスクロールをアニメーション化するためのプラグインはありますか？ウィンドウ内にスクロールバーがほとんどないとします。ユーザーがスクロールするたびに、スクロールバーがアニメーション表示され、瞬時に表示されないようにする必要があります。

は私が達成しようとしているかの正確なアイデアを得るためには、これを参照してください。これは、Silverlightである

http://demo.xceed.com/DataGrid_Silverlight/Demo_1.3/

を。

それが流動的にスクロールする方法を参照してください。私はjqueryを使用して同じ効果を達成したいです。これは可能ですか？

ありがとうございました。

Answer 1

このようなものが役立ちます。

$("html, body").animate({ 
      scrollTop: 0 
     }, "slow"); 

Answer 2

jQuery UIを使用して独自のカスタム「スライダ」を作成し、変更後に「userD」が提案したものを実行できます。 1つのスライダーは水平で、1つは垂直です（もちろん）。

次に、あなたは、CSS（「オーバーフロー：隠された;」を）使用して、特定のdivのために、ブラウザの実際のスクロールバーを非表示にしたいと思います

ここの@userDは....

を示唆されました$（ "html、body"）。animate（{ scrollTop：0 }、 "slow"）;

"html、body"ではなく "#myDiv"に変更します。

Answer 3

いい光プラグインjQuery .scrollTo。発見ここに：http://jqueryui.com/demos/slider/#default：Arial Fiesler Blog

sytanxは$('div').scrollTo(#anchorindiv,{duration:1000});

Answer 4

1. jQueryのUIを使用して簡単です。準備ができてハンドラに

2. 挿入コードここに示されているよう：

   var width = $('#scrollable').width() - $('#wrapper').width(); 
   
   $('#slider') 
       .slider({ max: width }) 
       .bind('slide', function(event, ui) { 
   
        $('#scrollable').stop().animate(
         { 
          right: ui.value 
         }, 
         1000 
        ); 
       }); 
   

3. はHTML：

   <div id="wrapper"> 
       <div id="scrollable"><!-- bla bla --></div> 
       <div id="slider"></div> 
   </div> 
   

4. スクロールバーを非表示にすることを忘れないでください：

   #wrapper { 
       text-align: left; 
       width: 900px; 
       height: 600px; 
       margin: 0 auto; 
       border: 1px solid black; 
       overflow: hidden; 
       position: relative; 
   }