原生js实现模拟滚动条

原生JS实现模拟滚动条，可以采用以下步骤：

步骤1：制作滚动条的HTML结构

在HTML中，需要设置滚动条容器和内容区域，其中内容区域可以设置固定高度，让内容超出内容区域，从而出现滚动条。

HTML结构示例代码如下：

<div class="scroll-box">
  <div class="scroll-content" style="height: 200px;">
    <!-- 填充内容 -->
  </div>
  <div class="scroll-bar">
    <div class="scroll-thumb"></div>
  </div>
</div>

在上述代码中，.scroll-box是滚动条容器，.scroll-content是内容区域，.scroll-bar是滚动条，.scroll-thumb是滚动条拖动块。

步骤2：制作滚动条的CSS样式

为了让滚动条实现滚动效果，需要设置.scroll-content的overflow属性为hidden，将内容区域的滚动条隐藏。同时，需要设置.scroll-bar和.scroll-thumb的样式，使其能够模拟原生滚动条的外观和拖动效果。

CSS样式示例代码如下：

.scroll-box {
  height: 200px;
  width: 300px;
  position: relative;
}

.scroll-content {
  overflow: hidden;
}

.scroll-bar {
  height: 100%;
  width: 10px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f1f1f1;
}

.scroll-thumb {
  height: 50px;
  width: 100%;
  position: relative;
  top: 0;
  background-color: #888;
  border-radius: 5px;
}

在上述代码中，.scroll-box的高度和宽度是固定的，.scroll-content的overflow属性为hidden，使得内容区域的滚动条隐藏。.scroll-bar是滚动条，其宽度和位置是与容器的宽度和位置对应的。.scroll-thumb是滚动条的拖动块，其高度是根据内容区域的高度和容器的高度进行计算得到的。

步骤3：实现滚动条的滚动效果

为了实现滚动条的滚动效果，需要为其添加事件监听器，当拖动滑块时，通过计算拖动块在滚动条容器中的位置，然后将内容区域的scrollTop设置为相应的值，实现滚动条的滚动效果。

JavaScript示例代码如下：

var scrollBox = document.querySelector(".scroll-box");
var scrollContent = document.querySelector(".scroll-content");
var scrollBar = document.querySelector(".scroll-bar");
var scrollThumb = document.querySelector(".scroll-thumb");

function initScroll() {
  var contentHeight = scrollContent.offsetHeight;
  var boxHeight = scrollBox.offsetHeight;
  var barHeight = boxHeight * boxHeight / contentHeight;
  var thumbHeight = barHeight > 50 ? barHeight : 50;

  scrollBar.style.height = barHeight + "px";
  scrollThumb.style.height = thumbHeight + "px";

  scrollThumb.addEventListener("mousedown", function(e) {
    e.preventDefault();
    var startY = e.clientY;
    var startTop = this.offsetTop;
    var barHeight = scrollBar.offsetHeight;
    var thumbHeight = this.offsetHeight;
    var maxTop = barHeight - thumbHeight;
    var contentHeight = scrollContent.offsetHeight;
    var boxHeight = scrollBox.offsetHeight;

    document.addEventListener("mousemove", function(e) {
      e.preventDefault();
      var offsetY = e.clientY - startY;
      var distance = offsetY + startTop;
      var percentage = distance / maxTop;
      var scrollTop = percentage * (contentHeight - boxHeight);

      if (distance < 0) {
        distance = 0;
      }
      if (distance > maxTop) {
        distance = maxTop;
      }

      this.top = distance;
      scrollContent.scrollTop = scrollTop;
    });
  });

  document.addEventListener("mouseup", function(e) {
    document.removeEventListener("mousemove");
  });
}

initScroll();

在上述代码中，initScroll()用于初始化滚动条，计算滚动条高度，根据计算得到的高度设置滚动条和拖动块的高度。.scroll-thumb添加鼠标按下事件监听器，当拖动滑块时，通过计算拖动块在滚动条容器中的位置，然后将内容区域的scrollTop设置为相应的值，实现滚动条的滚动效果。同时，需要添加鼠标松开事件监听器，取消鼠标移动事件监听器，确保只有在拖动时才会触发滚动效果。

示例1：垂直滚动条

下面给出一个垂直滚动条的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>垂直滚动条示例</title>
  <style>
    .scroll-box {
      height: 200px;
      width: 300px;
      position: relative;
    }

    .scroll-content {
      overflow: hidden;
    }

    .scroll-bar {
      height: 100%;
      width: 10px;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #f1f1f1;
    }

    .scroll-thumb {
      height: 50px;
      width: 100%;
      position: relative;
      top: 0;
      background-color: #888;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="scroll-box">
    <div class="scroll-content" style="height: 400px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at felis a magna malesuada placerat. Sed in nulla vel massa accumsan dapibus ut at nisl. Donec eget rutrum tortor. Praesent commodo, arcu at lacinia dictum, risus sapien varius elit, a rhoncus nunc metus ac nulla. Nullam a lacinia odio, a interdum lorem. Nulla ut ligula non quam vehicula lobortis. Phasellus viverra ante a enim blandit laoreet. Sed bibendum, arcu eu egestas luctus, ipsum magna volutpat sem, vitae ultrices ipsum diam a arcu. Suspendisse potenti. Donec id felis eget augue tempor sagittis.</p>
    </div>
    <div class="scroll-bar">
      <div class="scroll-thumb"></div>
    </div>
  </div>

  <script>
    var scrollBox = document.querySelector(".scroll-box");
    var scrollContent = document.querySelector(".scroll-content");
    var scrollBar = document.querySelector(".scroll-bar");
    var scrollThumb = document.querySelector(".scroll-thumb");

    function initScroll() {
      var contentHeight = scrollContent.offsetHeight;
      var boxHeight = scrollBox.offsetHeight;
      var barHeight = boxHeight * boxHeight / contentHeight;
      var thumbHeight = barHeight > 50 ? barHeight : 50;

      scrollBar.style.height = barHeight + "px";
      scrollThumb.style.height = thumbHeight + "px";

      scrollThumb.addEventListener("mousedown", function(e) {
        e.preventDefault();
        var startY = e.clientY;
        var startTop = this.offsetTop;
        var barHeight = scrollBar.offsetHeight;
        var thumbHeight = this.offsetHeight;
        var maxTop = barHeight - thumbHeight;
        var contentHeight = scrollContent.offsetHeight;
        var boxHeight = scrollBox.offsetHeight;

        document.addEventListener("mousemove", function(e) {
          e.preventDefault();
          var offsetY = e.clientY - startY;
          var distance = offsetY + startTop;
          var percentage = distance / maxTop;
          var scrollTop = percentage * (contentHeight - boxHeight);

          if (distance < 0) {
            distance = 0;
          }
          if (distance > maxTop) {
            distance = maxTop;
          }

          this.top = distance;
          scrollContent.scrollTop = scrollTop;
        });
      });

      document.addEventListener("mouseup", function(e) {
        document.removeEventListener("mousemove");
      });
    }

    initScroll();
  </script>
</body>
</html>

在上述代码中，设置内容区域的高度为400px，超出滚动条容器的高度200px，因此出现了垂直滚动条。

示例2：水平滚动条

下面给出一个水平滚动条的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>水平滚动条示例</title>
  <style>
    .scroll-box {
      height: 200px;
      width: 300px;
      position: relative;
    }

    .scroll-content {
      overflow: hidden;
      white-space: nowrap;
    }

    .scroll-bar {
      height: 10px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #f1f1f1;
    }

    .scroll-thumb {
      height: 100%;
      width: 50px;
      position: absolute;
      left: 0;
      background-color: #888;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="scroll-box">
    <div class="scroll-content" style="width: 600px;">
      <p style="display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at felis a magna malesuada placerat. Sed in nulla vel massa accumsan dapibus ut at nisl. Donec eget rutrum tortor. Praesent commodo, arcu at lacinia dictum, risus sapien varius elit, a rhoncus nunc metus ac nulla. Nullam a lacinia odio, a interdum lorem. Nulla ut ligula non quam vehicula lobortis. Phasellus viverra ante a enim blandit laoreet. Sed bibendum, arcu eu egestas luctus, ipsum magna volutpat sem, vitae ultrices ipsum diam a arcu. Suspendisse potenti. Donec id felis eget augue tempor sagittis.</p>
    </div>
    <div class="scroll-bar">
      <div class="scroll-thumb"></div>
    </div>
  </div>

  <script>
    var scrollBox = document.querySelector(".scroll-box");
    var scrollContent = document.querySelector(".scroll-content");
    var scrollBar = document.querySelector(".scroll-bar");
    var scrollThumb = document.querySelector(".scroll-thumb");

    function initScroll() {
      var contentWidth = scrollContent.offsetWidth;
      var boxWidth = scrollBox.offsetWidth;
      var barWidth = boxWidth * boxWidth / contentWidth;
      var thumbWidth = barWidth > 50 ? barWidth : 50;

      scrollBar.style.width = barWidth + "px";
      scrollThumb.style.width = thumbWidth + "px";

      scrollThumb.addEventListener("mousedown", function(e) {
        e.preventDefault();
        var startX = e.clientX;
        var startLeft = this.offsetLeft;
        var barWidth = scrollBar.offsetWidth;
        var thumbWidth = this.offsetWidth;
        var maxLeft = barWidth - thumbWidth;
        var contentWidth = scrollContent.offsetWidth;
        var boxWidth = scrollBox.offsetWidth;

        document.addEventListener("mousemove", function(e) {
          e.preventDefault();
          var offsetX = e.clientX - startX;
          var distance = offsetX + startLeft;
          var percentage = distance / maxLeft;
          var scrollLeft = percentage * (contentWidth - boxWidth);

          if (distance < 0) {
            distance = 0;
          }
          if (distance > maxLeft) {
            distance = maxLeft;
          }

          this.left = distance;
          scrollContent.scrollLeft = scrollLeft;
        });
      });

      document.addEventListener("mouseup", function(e) {
        document.removeEventListener("mousemove");
      });
    }

    initScroll();
  </script>
</body>
</html>

在上述代码中，设置了.scroll-content的white-space属性为nowrap，让文本不自动换行，从而撑满了整个.scroll-box。设置了.scroll-bar和.scroll-thumb的高度和宽度为10px和50px，使其可以模拟水平滚动条的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js实现模拟滚动条 - Python技术站