jQuery.NiceScroll

Posted on 2019-04-16 Edited on 2023-11-24 In 前端特效 Views: Disqus:

一、

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    .nicescroll-box {
      width: 200px;
      height: 100px;
      border: 1px red solid;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <div class="nicescroll-box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</body>

</html>

畫面為

說明：

原本預設的捲軸預設的樣式如上圖。

二、

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    .nicescroll-box {
      width: 200px;
      height: 100px;
      border: 1px red solid;
    }
  </style>
</head>

<body>
  <div class="nicescroll-box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>
  <script>
    $(".nicescroll-box").niceScroll();
  </script>
</body>

</html>

畫面為

說明：

如果想讓捲軸有點變化，則可以使用 jQuery.NiceScroll 套件。

三、

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    .nicescroll-box {
      width: 200px;
      height: 100px;
      border: 1px red solid;
    }
  </style>
</head>

<body>
  <div class="nicescroll-box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>
  <script>
    $(".nicescroll-box").niceScroll({
      cursorcolor: "#00F"
    });
  </script>
</body>

</html>