跨瀏覽器的jQuery滾動條使用body標籤

我想覆蓋瀏覽器的原生滾動條。有很多的jQuery插件，滾動條和我想他們中的大多數，如jScrollPane，PerfectScrollbar，TinyScrollbar等我試圖運用他們在body標籤象下面這樣：跨瀏覽器的jQuery滾動條使用body標籤

$('html').css({"overflow":"hidden"}); //hide native scrollbars 
    $('body').perfectScrollbar({wheelSpeed:10}); 
    //or 
    //$('#scrollbar').perfectScrollbar({wheelSpeed:10});

它的工作方式不當！所以，我有一個動態生成的內容div，其高度大於窗口大小，但沒有滾動條。在我看來，它只適用於一些固定大小的div。如果我換在div一些動態內容甚至不工作：

<body> 
<div id='scrollbar'> 
<div id=dynamicContent'>It is filled by jQuery ajax</div> 
</div> 
</body>

所以我的問題是如何修改任何的jQuery插件，滾動條具有動態內容的工作？我傾向於使用TinyScrollbar，因爲它的尺寸很小或者PerfectScrollbar。

來源

2013-12-12 Nolesh

我確實面對同樣的問題，完美的滾動條，所以它會有幫助，如果你可以共享解決方案，使用完美的滾動條！ –

我發佈了我的PerfectScrollbar解決方案。 – Nolesh

嗨感謝您的迴應，我有另一個插件，並得到了這個問題修復:) –

在TinyScrollbar的情況下，你不得不在元素的內容改變時調用可滾動元素的update（）函數。

var scrollbar = $("body"); 
$(scrollbar).update();

來源

2014-03-05 19:19:40

謝謝你的回答，但已經太晚了。我升級了'PerfectScrollbar'。現在它按我的意思工作。 – Nolesh

是的，從其他一些問題中遇到了這個問題，直到我發佈了答案之前，從來沒有足夠的時間去尋找日期:) 反正它比沒有答案的問題有更好的回答。 –

不幸的是，我沒有足夠的空閒時間來測試您的解決方案。我只是希望它能正常工作。所以，我應用你的答案。 – Nolesh

我改編了PerfectScrollbar與身體標記一起使用。源代碼你可以得到here。它是如何在現實生活中可以在網站Nolesh.com上看到的。如何使用它：

$('html').css({"overflow":"hidden"}); //hide native scrollbars 
$('html, body').perfectScrollbar({wheelSpeed:50}); //apply PerfectScrollbar to body tag 
//$('body').perfectScrollbar('update'); //to update

我希望這會節省別人的時間。

來源

2014-03-19 22:03:53 Nolesh

有一個叫做Nicescroll的jQuery插件，它有很多配置參數！看看這個niceScroll。我使用它與jQuery版本1.11.0，它的作品完美。

它也能夠設置主文檔滾動條的樣式。並適用於 textareas和iframes，divs等
它適用於IE6 +，Chrome 2+，Firefox 3 +，Opera 9.5+和Safari 4+。
另外它支持其他移動設備。

這裏是一個示例代碼來使用它。

$(document).ready(function() { 
    var nice = $("html").niceScroll(); 
});

來源

2014-03-20 09:56:30

從所有的滾動條插件中，這是最簡單和最快的實現，並且真正可以跨瀏覽器以及'html'標籤使用。 – lowtechsun

我PerfectScrollbar得到了同樣的問題太多，但不是使用自定義的插件（在我的情況下，它不工作），我寧願創建一個覆蓋整個頁面一個div和插件適用於DIV。此外，根據this，將自定義插件附加到正文並不是一個好習慣。

首先，添加風格的身體。

body 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

並用正文後面的div包裹整個頁面。

$("body").wrapInner("<div class='bodyScroll' style='overflow:auto;height:100%;position:relative'></div>"); 
$(".bodyScroll").perfectScrollbar();

來源

2015-10-29 12:30:03 rmdwirizki

很高興看到另一種解決方案。不幸的是，我遇到了另一個與'PerfectScrollBar'相關的問題。它與觸摸屏不正確工作。如果你能解決這個問題，請告訴我。 – Nolesh

我認爲這是一個比現有解決方案更好的解決方案。 – Neophile

跨瀏覽器的jQuery滾動條使用body標籤

回答

相關問題