如何使全局滚动条只应用于一个元素

Question

我有一个漂亮的仪表板，它的右侧有一个警告列表。这个警报列表是唯一滚动的东西，我真的想把页面的滚动应用到这个元素上。

几个月前，我发现这个答案中有人提出类似的问题，但给出的解决方案只是禁用页面滚动条，并为元素启用滚动条。我想要做的是保留页面滚动条，但让它只滚动一个元素。

我尝试过的解决方案：

• 位置固定-完全和不可撤销的断靴带
• 元素的整页位置固定和window.scrollTo() .丑和不一致

是否有一种使页面滚动条应用于特定元素的好方法，其中CSS position: fixed不能在元素上使用而不破坏页面？

Answer 1

尝试使用马诺斯库！从站点的这里说明下载：

HTML

将jquery.mCustomScrollbar.css包含在head标记中(更多信息)

 <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设置元素的高度/宽度，则可以使用setHL.8/setWidth选项参数。

初始化

通过javascript初始化

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

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

通过HTML初始化

将类mCustomScrollbar添加到任何要添加具有默认选项的自定义滚动条的元素中。可选地，通过HTML数据属性数据设置它的轴-mcs-轴(例如"x“表示水平，"y”表示垂直)和它的主题通过数据-mcs-主题。例如：

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

基本配置和选项参数

轴心

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

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

主题

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

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