向頁面添加漂亮的滾動條

Question

我想將這個使用 Nice Scroll 插件實現的漂亮滾動條添加到我的 web 頁面：

我的 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

我不明白你想做什么，但看看我的例子。 它通過設置配置參數並且還包括漂亮滾動插件的 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'});

笨拙的例子

更多示例請查看官方網站： https://nicescroll.areaaperta.com/demo/

Answer 2

插件丟失。 在您的腳本中添加了插件，它按預期工作。

 $(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>

Answer 3

不需要使用任何插件，實際上使用普通的 CSS 是一件容易的事。 您可以查看 W3Schools 的這篇文章，其中解釋了滾動條樣式的工作原理以及要自定義的所有屬性。

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