利用jquery和BootStrap实现动态滚动条效果

接下来我将详细讲解如何利用 jquery 和 Bootstrap 实现动态滚动条效果。本攻略分为以下几步：

1. 引入必需的资源文件让网页使用 jquery 和 Bootstrap

在 HTML 代码中引入以下两行代码，使得网页可以使用 jquery 和 Bootstrap：

<!-- 引入 jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入 bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

2. 编写 HTML 结构

在 HTML 中定义一个 div 空元素，设置它的 id 为 scrollbar：

<div id="scrollbar"></div>

3. 添加 CSS 样式

定义 css 样式表，在样式表中设置定义 scrollbar 的高度和宽度等基础属性，并将其定位于屏幕的右侧：

#scrollbar {
  position: fixed;
  right: 0;
  top: 50%;
  width: 5px;
  height: 100px;
  margin-top: -50px;
  background-color: #ccc;
  border-radius: 5px;
}

4. 编写 JavaScript 代码

使用 jQuery 实现滑动条的动态效果，代码如下：

// 定义变量
var $scrollbar = $("#scrollbar");
var $contents = $(".contents");
var $window = $(window);

// 监听窗口滚动事件
$window.scroll(function() {
    // 获取窗口可见范围底部距离文档顶部的距离
    var windowHeight = $window.height();
    var bottomPositon = $window.scrollTop() + windowHeight;

    // 获取内容高度
    var contentsHeight = $contents.outerHeight();

    // 计算滚动条的位置
    var scrollbarTop = bottomPositon / contentsHeight * windowHeight;

    // 更新滚动条的位置
    $scrollbar.css("top", scrollbarTop + "px");
});

代码中，先定义了 $scrollbar，$contents 和 $window 三个变量，分别表示滑动条、窗口内的所有内容和窗口本身，然后添加了一个 scroll 事件监听器，该监听器会在每次窗口滚动时被触发。

在滑动监听器中，首先获取了窗口可视范围底部距离文档顶部的距离、所有内容的高度和当前滚动条应该处于的位置。最后设置了滑动条的位置。

示例 1

以下是一个基本示例代码，你可以在你的项目中使用它：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>动态滚动条效果示例</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

  <style type="text/css">
    #scrollbar {
      position: fixed;
      right: 0;
      top: 50%;
      width: 5px;
      height: 100px;
      margin-top: -50px;
      background-color: #ccc;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div id="scrollbar"></div>
  <div class="contents">
    <h2>示例标题</h2>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
    <p>示例内容</p>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var $scrollbar = $("#scrollbar");
    var $contents = $(".contents");
    var $window = $(window);

    $window.scroll(function() {
        var windowHeight = $window.height();
        var bottomPositon = $window.scrollTop() + windowHeight;

        var contentsHeight = $contents.outerHeight();

        var scrollbarTop = bottomPositon / contentsHeight * windowHeight;

        $scrollbar.css("top", scrollbarTop + "px");
    });
  </script>
</body>
</html>

示例 2

以下是一个示例代码的改进版，可以较为友好的使用动态滚动条效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>动态滚动条效果示例</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

  <style type="text/css">
    #scrollbar {
      position: fixed;
      right: 0;
      top: 50%;
      width: 5px;
      height: 100px;
      margin-top: -50px;
      background-color: #ccc;
      border-radius: 5px;
      transition: top .1s linear;
    }

    .container {
      margin-top: 50px;
    }

    .item {
      margin-bottom: 20px;
      background-color: #f7f7f7;
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 5px;
      transition: transform .1s linear;
    }

    .item:hover {
      transform: scale(1.01);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>示例标题</h2>

    <div class="item">
      <p>示例内容</p>
      <p>示例内容</p>
      <p>示例内容</p>
    </div>

    <div class="item">
      <p>示例内容</p>
      <p>示例内容</p>
      <p>示例内容</p>
    </div>

    <div class="item">
      <p>示例内容</p>
      <p>示例内容</p>
      <p>示例内容</p>
    </div>

    <div class="item">
      <p>示例内容</p>
      <p>示例内容</p>
      <p>示例内容</p>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var $scrollbar = $("#scrollbar");
    var $container = $(".container");
    var $window = $(window);

    var containerHeight = 0;
    $container.children(".item").each(function(index, ele) {
      containerHeight += $(ele).outerHeight();
    });
    $container.height(containerHeight);

    $window.scroll(function() {
        var windowHeight = $window.height();
        var bottomPositon = $window.scrollTop() + windowHeight;

        var contentsHeight = containerHeight;

        var scrollbarTop = bottomPositon / contentsHeight * windowHeight;

        $scrollbar.css("top", scrollbarTop + "px");
    });
  </script>
</body>
</html>

其中改进之处有：

引入了一个 CSS 过渡效果，使滚动条移动更加平滑；
新增了 item 类型的元素，多样化页面内容，让页面看起来更加友好；
快速计算了所有 item 的高度和，设置 container 元素与之相等来同时触发滚动条效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用jquery和BootStrap实现动态滚动条效果 - Python技术站