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

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 标记中或文档的最底部，就在结束 body 标记之前

<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

要添加滚动条的元素应该具有溢出 block 的典型 CSS 属性，即高度(或最大高度)值、自动(或隐藏)溢出值和内容长足以需要滚动。对于水平滚动条，元素应该设置宽度(或最大宽度)值。

如果您更喜欢通过 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>

基本配置&可选参数

轴

默认情况下，脚本应用垂直滚动条。要添加水平或 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"
});