js div自制滚动条

最新推荐文章于 2023-11-30 10:46:17 发布
最新推荐文章于 2023-11-30 10:46:17 发布
阅读量592 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014805482/article/details/83658583
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../css/reset.css"/>
    <style>
        .box{
            width: 400px;
            height: 500px;
            border: 1px solid red;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }
        .content{
            padding: 5px 18px 5px 5px;
            text-indent: 2em;
            font-size: 15px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .scroll{
            width: 18px;
            height: 100%;
            background-color: #eeeeee;
            position: absolute;
            right: 0;
            top: 0;
        }
        .scroll .bar{
            display: inline-block;
            border-radius: 8px;
            width: 18px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div class="content">
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳
        飞雪连天射白鹿 笑书神侠倚碧鸳 飞雪连天射白鹿 笑书神侠倚碧鸳11
    </div>
    <div class="scroll">
        <span class="bar"></span>
    </div>
  <script>
      function returnId(id) {
          return document.getElementById(id);
      }
      //外层盒子对象
      var box = returnId("box");
      //内容对象
      var content =box.children[0];
      //滚动条盒子对象
      var scroll = box.children[1];
      //滚动条对象
      var bar = scroll.children[0];

      //初始化滚动条高度
      //外层盒子高度/内容高度 = 滚动条高度/滚动条盒子高度
      //滚动条高度 = 外层盒子高度*滚动条盒子高度/内容高度
      var height = box.offsetHeight * scroll.offsetHeight / content.offsetHeight;
      bar.style.height = height+"px";

      //滚动条移动
      //触发按下滚动条事件
      bar.onmousedown = function (ev) {
          //求出按下区域与滚动条最上边距离
          var space = window.event?window.event.clientY-bar.offsetTop:ev.clientY-bar.offsetTop;
          document.onmousemove = function (ev2) {
              //求出滚动条此时距离滚动条盒子高度的距离
              //求出滚动条此时距离滚动条盒子高度的距离 = 此时可以区域距离 - 按下区域与滚动条最上边距离
              var y = window.event?window.event.clientY-space:ev2.clientY-space;
              y = y<0?0:y;//不让滚动条移动到外面去
              y = y>scroll.offsetHeight:y-bar.offsetHeight?scroll.offsetHeight:y-bar.offsetHeight:y;
              bar.style.top = y+"px";
              //内容移动
              //滚动条移动距离/滚动条最大移动距离 = 内容移动距离/内容最大移动距离
              var contentY = y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
              content.style.top = -contentY+"px";
              //设置鼠标移动的时候,文字不被选中 //ie支持document.selection
                window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();
          };
      };
      document.onmouseup = function () {
          document.onmousemove = null;
      };

  </script>
</div>
</body>
</html>

实现效果
在这里插入图片描述

js实现自定义滚动条
06-02
js实现自定义滚动条，有详细的中文注释，适合新手
详解如何用div实现自制滚动条
09-24
为了使自制滚动条能够动态响应用户的操作，我们需要监听两个关键事件：鼠标滚轮滚动和鼠标拖拽滚动条。对于鼠标滚轮事件，我们使用`'mousewheel'`事件监听器，根据`e.deltaY`的值来改变视口的`scrollTop`，然后根据...
js 自制滚动条
weixin_30530339的博客
03-16 111
写了个js自制滚动条，首先，先看一下demo（点击这里）先 有两个demo，右边那个黑色那个，是我一开始写的比较肤浅的代码： var scrollself=(function(){ var scrollblock, //滚动块 scrollcontent, //被滚动的内容 scrollbar, //滚动条 sc...
自制滚动条
liyaxue的专栏
07-02 996
1.在页面中引用scrollbar.js 2.在页面中引入scroll_bar样式 #dv_scroll_bar {position:absolute;right:8%;top:150px;width:14px;height:520px;border-left:1px solid #B5B5B5;} #dv_scroll_bar .Scrollbar-Track{
js中给div加滚动条
menghuannvxia的专栏
10-11 5890
在给div加滚动条的时候一定要定义高度和宽度，这样滚动条才有效，加入样式：overflow:auto;
JS 实现自定义滚动条 实现透明度控制和滚动条
diantiaozhu8383的博客
05-07 383
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">...
自制滚动条：用div打造个性化滚动效果
文章首先指出浏览器默认滚动条的局限性，然后逐步讲解了实现自制滚动条的步骤。 1. 隐藏原生滚动条 要实现自定义滚动条，首先需要隐藏浏览器自带的滚动条。通过CSS样式，可以将`body`或特定`div`的`overflow-y`设置...
自制滚动条教程：用div实现独特设计
"详解如何用div实现自制滚动条" 在网页设计中，滚动条是一个不可或缺的元素，尤其在处理大量内容时。然而，浏览器默认的滚动条样式往往不能满足设计师对于美观和个性化的需求。本文将详细介绍如何利用div来创建...
滚动条，div滚动条，图层下拉条
03-08
JavaScript（可能在`script.js`或类似文件中）在某些情况下可能用于增强滚动条交互，例如添加动画效果、响应式行为或者监听滚动事件。例如，我们可以通过监听`scroll`事件来改变滚动条的状态，或者在滚动到页面特定...
自制图片代替滚动条代码
08-17
在网页设计中，为了增强...以上就是关于“自制图片代替滚动条代码”的主要内容，涵盖了CSS滚动条自定义、JavaScript库的使用以及在设计时考虑的可访问性和性能问题。希望对你在网页设计中实现个性化的滚动条有所帮助。
js自定义滚动条
elena_705的博客
04-07 247
bar.onmousedown = function (event) { const pageY = event.pageY || event.clientY + event.scrollTop let barTop = pageY - box.offsetHeight - bar.offsetHeight if (barTop < 0) { barTop = 0 } else if (barTop > scroll.offsetHeight - bar.offsetHeight) { barT
js实现一个自定义的滚动条
baidu_34157788的博客
08-23 1991
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div模拟的自定义滚动条</title> <style type="text/css"> * { margin: 0; padding: 0
js滚动条
senlin1202的博客
03-04 597
zg1989bd js滚动条 在页面中，滚动条效果是及其常见的效果，如何用JS自制滚动条效果呢，例如在苹果商城。 当我们用鼠标滑动时 内容区域会随着改变。 在例如：当版块内容文字很多时，人们往往会跳过阅读，这是我们完全伪装，给用户一种错觉，这版块内容很少，请你慢慢滑动观看，就像大话江湖里面 小沈阳说的那样：“我喜欢看图片的，一看字我就头晕"。其实就是因为某版块内容太多，首先就给用户一
自制的滚动条
qq_30327587的博客
04-13 358
// 简单的一个自制滚动条 function Scroll(options) { this.el_scroll = document.getElementsByClassName(options.scroll)[0] || document.getElementById(options.scroll); this.el_container = document.getElement...
做一个自定义滚动条
05-25 5055
关于滚动条，大家知道有一些部件可以设置自带的滚动条，来达到滚动的效果，比如动态面板。但是系统自带的滚动条有一个通病：不太好看并且不能修改样式。那我们怎么做好看的滚动条呢？需要我们去做设置。先看一下动态面板做出来的滚动条是怎样的。​自带的这种滚动条有时会不符合我们的要求。那么就需要做出改动。以动态面板为例，我们一起来看看怎么来处理这个滚动条吧。如果滚动条是不需要显示出来的话，只需要把动态面板的宽度加...
JavaScript自定义滚动条
qq_43188340的博客
09-24 336
浏览器自带的滚动条样式比较单一，下面是利用原生js实现的滚动条，可以换成自己喜欢的样式。 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
用js写一个自定义的滚动条
最新发布
weixin_45644355的博客
11-30 961
滚动条组件 tabScroll.vue。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值