为页面添加漂亮的滚动条

Question

我想将这个使用 Nice Scroll 插件实现的漂亮滚动条添加到我的网页中：

my web 我认为该页面正在使用如下所示的 HTML 结构，并使用 Nice Scroll 插件向滚动条添加功能。

$(function() {
  $("#ascrail2000").niceScroll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ascrail2000" class="nicescroll-rails" style="width: 10px; z-index: 2999; cursor: default; position: fixed; top: 0px; height: 100%; right: 0px; opacity: 1; border-radius: 10px;">

  <div style="position: relative; top: 40px; float: right; width: 3px; height: 103px; background-color: rgb(240, 159, 5); border: none; background-clip: padding-box; border-radius: 0px;">

  </div>

</div>

<div id="ascrail2000-hr" class="nicescroll-rails" style="height: 10px; z-index: 2999; position: fixed; left: 0px; width: 100%; bottom: 0px; opacity: 1; cursor: default; display: none;">

  <div style="position: relative; top: 0px; height: 10px; width: 1536px; background-color: rgb(240, 159, 5); border: none; background-clip: padding-box; border-radius: 0px;">

  </div>

</div>

我无法让代码在没有手的情况下工作...我缺少什么？

注意：脚本标签是我自己写的，我觉得有问题

Answer 1

无需使用任何插件，事实上，使用普通 CSS 是一项简单的任务。您可以查看 W3Schools 的这篇文章，其中解释了滚动条样式的工作原理以及要自定义的所有属性。

https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Answer 2

我不明白你想做什么，但看看我的例子。它通过设置配置参数以及包括 nice scroll 插件的 cdn 来工作。

在jquery之后添加这个cdn:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>

漂亮的滚动初始化例如：

$("#ascrail2000").niceScroll({
   cursorwidth:3,
  cursoropacitymin:0.4,
  cursorcolor:'rgb(240, 159, 5)',
  cursorborder:'none',
  cursorborderradius:4,
  autohidemode:'leave'});

plunker example

更多示例请查看官网： https://nicescroll.areaaperta.com/demo/

Answer 3

缺少插件。在您的脚本中添加了插件，它按预期工作。

$(function() {
  $("#ascrail2000").niceScroll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>

<div id="ascrail2000" class="nicescroll-rails" style="width: 10px; z-index: 2999; cursor: default; position: fixed; top: 0px; height: 100%; right: 0px; opacity: 1; border-radius: 10px;">

  <div style="position: relative; top: 40px; float: right; width: 3px; height: 103px; background-color: rgb(240, 159, 5); border: none; background-clip: padding-box; border-radius: 0px;">

  </div>

</div>

<div id="ascrail2000-hr" class="nicescroll-rails" style="height: 10px; z-index: 2999; position: fixed; left: 0px; width: 100%; bottom: 0px; opacity: 1; cursor: default; display: none;">

  <div style="position: relative; top: 0px; height: 10px; width: 1536px; background-color: rgb(240, 159, 5); border: none; background-clip: padding-box; border-radius: 0px;">

  </div>

</div>

为页面添加漂亮的滚动条

Adding nice scroll bar to the page

html

javascript

nicescroll