在滾動條中動畫滾動

是否有任何插件可供jquery動畫滾動？假設我在窗口中有幾個滾動條。我希望每當用戶滾動滾動條時應該有動畫而不是瞬間出現。在滾動條中動畫滾動

要得到什麼，我想實現一個確切的想法，看到這一點：

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

這是在Silverlight。

看它如何以流暢的方式滾動。我想達到同樣的效果，但使用jQuery。這可能嗎？

謝謝。

來源

2011-10-14 Jaggu

似乎需要重新調整卷軸f結。由於有很多平滑的滾動腳本，但沒有一個滾動實際上變得像您鏈接的演示一樣平滑。甚至不知道它是否有可能:( –

@Marco Johannesen：:( – Jaggu

我不能查看演示截至目前爲1）我沒有安裝silverlight，我也不打算安裝它 2）我在撥號時，不能安裝它：P 如果你需要的是在div中的滾動條，這可以通過使用jqueryUI及其相當流暢來實現。見user934278的答案！ –

有些事情可能會有所幫助。

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

來源

2011-10-14 10:27:07 Dhiraj

你完全誤解了這個問題，這個答案與這個問題沒有任何關係。 – Jaggu

您可以使用jQuery UI製作自己的自定義「滑塊」，然後在做出更改時，執行「userD」建議的操作。一個滑塊可以是水平的，一個垂直的（當然）。

然後，你會希望通過使用CSS來隱藏瀏覽器爲特定的div實際滾動條（「溢出：隱藏;」）

這裏的是@userD建議....

$（「html，body」）。animate（{scroll0： }，「slow」）;

你當然會改爲「#myDiv」而不是「html，body」。

來源

2011-10-14 10:45:00

那麼，@ userD由於反對如此迅速地抨擊他而移除了他的答案:( –

一個漂亮的燈插件jQuery .scrollTo。這裏找到：Arial Fiesler Blog

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

來源

2011-10-14 10:53:31 comu

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

代碼插入到準備處理程序如下所示：

var width = $('#scrollable').width() - $('#wrapper').width(); 

$('#slider') 
    .slider({ max: width }) 
    .bind('slide', function(event, ui) { 

     $('#scrollable').stop().animate(
      { 
       right: ui.value 
      }, 
      1000 
     ); 
    });

HTML：

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

不要忘了隱藏滾動條：

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

來源

2012-01-10 15:47:21 roger

在滾動條中動畫滾動

回答

相關問題