如何使全局滾動條僅適用於一個元素

Question

我有一個用Bootstrap製作的漂亮的儀表板，右側有警報列表。這個警報列表是唯一滾動的，我真的想將頁面滾動應用到這個元素。

我發現this answer與幾個月前有人問過類似的問題，但給出的解決方案只是禁用頁面滾動條併爲元素啓用滾動條。我期望做的是保持頁面滾動條，但使其只滾動一個元素。

解決方案我已經試過：

• 位置固定的 - 完全及不可撤回地打破引導

• 整頁位置固定和window.scrollTo()的元素 - 醜陋的和不一致的

是有一個很好的方法使頁面滾動條適用於一個特定的元素，其中CSS position: fixed不能用於元素沒有打破頁面？

Answer 1

嘗試使用Manos庫！從here 說明從網站下載：

HTML

包括在頭jquery.mCustomScrollbar.css標記HTML文檔（詳細信息）

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" /> 

包括jQuery庫（如果您的項目不使用它已經）和jquery.mCustomScrollbar.concat.min.js在頭標籤中或文檔的最底部，就在結束標籤之前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script> 

CSS

要添加滾動條的元素應具有溢出塊的典型CSS屬性，它們是高度（或最大高度）值，自動溢出值（或隱藏）和足夠長的內容需要滾動。對於水平滾動條，元素應該設置寬度（或最大寬度）值。

如果您希望通過javascript設置元素的高度/寬度，則可以使用setHeight/setWidth選項參數。

初始化

初始化通過javascript

文件包含後，呼籲元素選擇mCustomScrollbar功能要通過HTML添加滾動條（S）

<script> 
    (function($){ 
     $(window).on("load",function(){ 
      $(".content").mCustomScrollbar(); 
     }); 
    })(jQuery); 
</script> 

初始化

將類mCustomScrollbar添加到任何要添加自定義滾動條（默認選項）的元素。或者，通過HTML數據屬性data-mcs-axis（例如，「x」表示水平，「y」表示垂直）以及通過data-mcs-theme設置其主題。例如：

<div class="mCustomScrollbar" data-mcs-theme="dark"> 
    <!-- your content --> 
</div> 

基本配置&選項參數

軸

默認情況下，腳本應用於垂直滾動條。要添加一個水平或2軸滾動條，調用mCustomScrollbar功能設置爲「x」或分別

$(".content").mCustomScrollbar({ 
axis:"x" // horizontal scrollbar 
}); 
$(".content").mCustomScrollbar({ 
axis:"yx" // vertical and horizontal scrollbar 
}); 

主題

要快速改變滾動條的外觀，設置「YX」軸線選項主題選項參數，以在任何可用jquery.mCustomScrollbar.css準備使用的主題，例如：

$(".content").mCustomScrollbar({ 
theme:"dark" 
});