多个 jQuery niceScroll 插件答案

【问题标题】：Multiple jQuery niceScroll plugin多个 jQuery niceScroll 插件
【发布时间】：2015-09-28 19:00:10
【问题描述】：

我有 jQuery niceScroll 设置，它在 body 上运行良好，但是我想在同一页面上有不同的主题滚动条。我有以下代码：

 <script>
  $(document).ready(function () {
    $("body").niceScroll({cursorcolor:"#267ec8", cursorwidth:"10px"});
    $("#test").niceScroll({cursorcolor:"#ffffff", cursorwidth:"5px"});
  });
 </script>

链接：http://areaaperta.com/nicescroll/

Body 我想要一个蓝色滚动条，而在 div 上我想要滚动条更白更薄。但是，上面的代码在 body 上是有效的，但不是在 div 上的？

同一页面上可以有多个吗？任何帮助都会很棒，我被卡住了，看不出上面有什么问题。

谢谢

【问题讨论】：

嗯，当我正确阅读文档时，将其应用于 body-elements 意味着在所有滚动条的主要样式中使用它。您是否尝试过使用 2 个不同的 div 而不是使用 div 和 body？
areaaperta.com/nicescroll/demo.html Demo 在父母和孩子身上有不同的颜色 - 所以，我想说这是可能的......也许看看那个来源。
可能，here 有一个工作示例。您会看到它正在处理 body 和 #test 元素。在你正在处理的地方修改你的代码。
嗨，这里是所有代码的链接，这个例子没有用>jsfiddle.net/p6m97gwb/4希望你们能帮忙，谢谢
这里有一个带有正文滚动条的，只是不能让蓝色 div 中的那个工作：jsfiddle.net/JPA4R/135

标签： jquery html css scroll

【解决方案1】：

来自documentation：

带有“wrapper”的DIV，由两个div组成，第一个是视口，后一个是内容：

$(document).ready(

  function() { 

      $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});

  }

);

在您的小提琴示例中，您以这种方式调用 niceScroll：

$(".filterContainer").niceScroll({
    cursorcolor: "#ffffff",
    cursorwidth: "5px"
});

在您的 html 代码中，.filterContainer(content) 被 #sidebar-wrapper(viewport) 元素包装。

所以你必须修改niceScroll 的调用方式。所以，按照文档所说的：

$("#sidebar-wrapper").niceScroll(".filterContainer",{
    cursorcolor: "#ffffff",
    cursorwidth: "5px"
});

Here 一个工作示例。

【讨论】：