自定义滚动条案例

最新推荐文章于 2021-09-08 17:35:10 发布

if you hold me tight

最新推荐文章于 2021-09-08 17:35:10 发布

阅读量116

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45401346/article/details/104771922

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css样式表

 <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid purple;
            margin: 100px;
            position: relative;
            overflow: hidden;
        }
        
        .content {
            padding: 5px 18px 5px 5px;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        
        .scroll {
            width: 18px;
            height: 100%;
            background-color: #cccccc;
            position: absolute;
            top: 0px;
            right: 0px;
        }
        
        .bar {
            height: 100px;
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: hotpink;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>

html样式表下面展示一些内联代码片`。

<body>
    <div class="box" id="box">
        <!-- 文字内容 -->
        <div class="content" id="content">
            煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。
            煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。
            煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。
            煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。
            煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。
            煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。
            煎和熬都是变美味的方法，加油也是。煎和熬都是变美味的方法，加油也是。 煎和熬都是变美味的方法，加油也是。努力！
        </div>
        <!-- 滚动条 -->
        <div class="scroll" id="scroll">
            <div class="bar" id="bar"></div>
        </div>
    </div>

javaScript代码
下面展示一些 内联代码片。

<script>
        function my$(id) {
            return document.getElementById(id);
        }
        //获取所需要的元素
        //最外面的div
        var box = my$("box");
        //装滚动条的div
        var scroll = my$("scroll");
        //滚动条
        var bar = my$("bar");

        //设置滚动条的高度  因为内容跟滚动有比例关系，内容越多，滚动条就越短。
        //滚动条的高度/装滚动条的div高=box 的高/文字内容的高度
        //滚动条的高=装滚动条的div高*box的高/文字内容的高度
        var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
        bar.style.height = height + "px";

        //移动滚动条
        bar.onmousedown = function(e) {
            //用鼠标离顶部浏览器的高度减去滚动条离浏览器顶部的高度等于鼠标在滚动条中的高度值
            var spaceY = e.clientY - bar.offsetTop;
            //为了提升用户体验，支持全页面滚动
            document.onmousemove = function(e) { //移动事件
                //滚动条距离浏览器顶部的高度
                var y = e.clientY - spaceY;
                //滚动条的滚动范围
                y = y < 0 ? 0 : y;
                y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;
                bar.style.top = y + "px";

                //设置鼠标移动的时候,文字不被选中

                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();


                //比例关系： 滚动条的移动距离/文字的移动距离=滚动条的最大移动距离/文字的最大移动距离
                //文字的移动距离=滚动条的移动距离*滚动条的最大移动距离/文字的最大移动距离
                var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight)
                content.style.marginTop = -moveY + "px";
            };
        };

        //注册鼠标抬起事件
        document.onmouseup = function() {
            document.onmousemove = null;
        }
    </script>

效果图：
在这里插入图片描述

if you hold me tight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义滚动条案例

css样式表 <style> * { margin: 0px; padding: 0px; } .box { width: 300px; height: 500px; border: 1px soli...
复制链接

扫一扫

专栏目录