原生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-contentoverflow属性为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-contentoverflow属性为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-contentwhite-space属性为nowrap,让文本不自动换行,从而撑满了整个.scroll-box。设置了.scroll-bar.scroll-thumb的高度和宽度为10px和50px,使其可以模拟水平滚动条的效果。

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

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS中让DIV居中的代码

    要让一个DIV居中,可以通过以下三种方式实现: 1. 使用margin属性 将DIV的宽度固定,然后通过设置margin属性,使其左右居中。 .div-center { width: 300px; margin: 0 auto; } 上面代码中,设置了DIV的宽度为300px,然后将左右margin设置为auto,这样DIV就会在水平方向上居中。 2. 使用…

    css 2023年6月10日
    00
  • jQuery 一个图片切换的插件

    下面我来详细讲解一下怎样使用jQuery来实现一个图片切换的插件。 一、概述 在网页中,经常会用到图片轮播功能,这就需要用到一些图片切换的插件。jQuery是一个非常流行的JavaScript库,它提供了一些非常方便实用的API,对于开发图片切换插件来说,它也提供了一些非常有用的函数和方法。下面就来具体介绍如何使用jQuery来制作一个图片切换的插件。 二、…

    css 2023年6月10日
    00
  • 基于JS实现二维码名片生成的示例代码

    基于JS实现二维码名片生成的示例代码 简介 本文将介绍如何使用JavaScript编写代码来生成二维码名片。这样的应用程序可以方便地将个人或商业信息分享给其他人。一些示例将帮助您更好地理解如何使用JavaScript来生成二维码名片。 准备工作 在开始编写JavaScript代码之前,您需要在网页中引入QRCode.js库。通过在HTML文件中引入QRCod…

    css 2023年6月11日
    00
  • css ul li 的使用及浏览器兼容问题

    那我来为您讲解一下“CSS ul li的使用及浏览器兼容问题”的攻略。 使用CSS样式修饰 ul li 列表 HTML基础代码 在进行样式修饰之前,我们先需要在HTML中定义一个ul li列表,示例代码如下: <ul> <li>列表项1</li> <li>列表项2</li> <li>列表…

    css 2023年6月10日
    00
  • 详解Selenium中元素定位方式

    下面是《详解Selenium中元素定位方式》的完整攻略。 概述 Selenium是一款流行的Web自动化测试工具,用于测试Web应用程序的功能和界面。在Selenium中,元素定位是非常重要的一部分。元素定位指的是通过不同的方式找到页面上的元素,以进行后续的操作、验证等。 Selenium支持多种元素定位方式,包括ID、name、class name、tag…

    css 2023年6月9日
    00
  • 优化浏览器渲染 避免CSS expressions

    优化浏览器渲染是一项综合性的工作,它包括了诸如HTML性能优化、CSS优化、JavaScript性能优化等多个方面,本文将围绕着CSS优化展开,介绍如何避免CSS expressions,从而提高浏览器渲染性能。 什么是CSS expressions CSS expressions是非常强大和常用的一种CSS技术,它能够让CSS样式表动态计算和赋值。比如,我…

    css 2023年6月10日
    00
  • highlight.js 代码高亮插件的使用详解

    Highlight.js 代码高亮插件的使用详解 什么是 highlight.js highlight.js 是一个用于 Web 页面的 JavaScript 代码高亮库。它支持超过 180 种编程语言和文档格式的语法高亮。 如何使用 highlight.js 安装 你可以通过 NPM 安装 highlight.js: npm install highlig…

    css 2023年6月9日
    00
  • javascript动态向网页中添加表格实现代码

    添加表格是前端开发中常用且必要的操作之一,其中JavaScript作为一门强大的脚本语言,可以方便地动态向网页中添加表格。下面我将为大家讲解如何使用JavaScript实现动态添加表格。 1.创建一个表格容器 首先需要在HTML中创建一个用于存放表格的容器,例如一个<div>标签: <div id="myTable"&g…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部