向页面添加漂亮的滚动条

Question

I want to add this beautiful scroll bar implemented using Nice Scroll plugin to my web page:

my web I think the page is using an HTML structure like below and adds functionality to the scrollbar using the Nice Scroll plugin.

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

I can't make the code working without a hand... What I'm missing?

Note: I wrote the script tag myself and I think there is a problem with it.

Answer 1

I didn't understand what did you try to do, but take a look in my example. It works by setting config params and also including the cdn of nice scroll plugin.

Add this cdn after jquery:

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

Nice scroll initialisation for example:

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

plunker example

For more examples please take a look at the official site: https://nicescroll.areaaperta.com/demo/

Answer 2

Plugin is missing. Added plugin in your script and it is working as expected.

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

There's no need to use any plugin, in fact is an easy task using plain CSS. You can check this article of W3Schools where they explain how scroll bar styling works and all it's properties to be customized.

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