javascript - 在滚动条中动画滚动

Question

是否有任何可用于 jquery 的插件来为滚动设置动画？假设我的窗口中几乎没有滚动条。我希望无论何时用户滚动滚动条都应该动画而不是立即出现。

要准确了解我要实现的目标，请参阅:

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

这是在 Silverlight 中。

看看它是如何以流畅的方式滚动的。我想达到同样的效果，但使用 jquery。这可能吗？

谢谢。

Answer 1

1. 使用 jQuery UI:http://jqueryui.com/demos/slider/#default .

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;
   }