如何使全局滚动条仅适用于一个元素

Question

我有一个漂亮的Bootstrap仪表板，右侧有一个警报列表。这个警报列表是滚动的唯一内容，我真的想将页面的滚动应用到这个元素。

我发现this answer有人在几个月前问过类似的东西，但给出的解决方案只是禁用页面滚动条并为元素启用滚动条。我要做的是保留页面滚动条，但只使其滚动一个元素。

我试过的解决方案：

• 位置已修复 - 完全且不可撤销地破坏了Bootstrap

• 整个页面位置已修复且元素为window.scrollTo() - 丑陋且不一致

是否有一种很好的方法可以将页面滚动条应用于一个特定的元素，而在不破坏页面的情况下，不能在元素上使用CSS position: fixed？

Answer 1

尝试使用Manos库！从here下载 来自网站的说明：

HTML

在HTML文档的head标记中包含jquery.mCustomScrollbar.css（更多信息）

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

包含jQuery库（如果您的项目尚未使用它）和jquery.mCustomScrollbar.concat.min.js在head标记中或文档的最底部，就在关闭正文标记之前

<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属性，这些属性是高度（或最大高度）值，auto（或隐藏）溢出值和内容长足以要求滚动。对于水平滚动条，元素应设置宽度（或最大宽度）值。

如果您希望通过javascript设置元素的高度/宽度，可以使用setHeight / setWidth选项参数。

初始化

通过javascript初始化

包含文件后，在要添加滚动条的元素选择器上调用mCustomScrollbar函数

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

通过HTML初始化

将类mCustomScrollbar添加到要添加默认选项的自定义滚动条的任何元素。可选地，通过HTML数据属性data-mcs-axis设置其轴（例如，水平为“x”，垂直为“y”），通过data-mcs-theme设置其主题。例如：

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

基本配置＆amp;选项参数

轴

默认情况下，脚本应用垂直滚动条。要添加水平或2轴滚动条，请分别调用轴选项设置为“x”或“yx”的mCustomScrollbar函数

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

主题

要快速更改滚动条的外观，请将主题选项参数设置为jquery.mCustomScrollbar.css中可用的任何即用主题，例如：

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