div+css(javascript)自定义滚动条

最新推荐文章于 2022-03-29 20:42:18 发布
最新推荐文章于 2022-03-29 20:42:18 发布
阅读量124 收藏 1
点赞数
分类专栏： javascipt 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xie1987524/article/details/84630564
版权 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>自定义滚动条</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    #warpper {
        width: 500px;
        height: 300px;
        margin: 200px;
        position: relative;
    }
    #contentWrapper{
    	width: 480px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;       
    }
    #content {
        width: 480px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 30px;
    }
    #scrollbarp {
        width: 20px;
        background-color: blue;
        height: 300px;
        position: absolute;
        right: 0;
        top: 0;
    }
    #scrollbar {
        width: 20px;
        background-color: red;
        height: 30px;
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: hand;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var content = document.getElementById("content");
        var scrollbar = document.getElementById("scrollbar");
        var scrollbarp = document.getElementById("scrollbarp");

        scrollbar.onmousedown = function(e) {
            //记录鼠标的位置，滚动条当前的top
            var e = e || window.event;
            /***
              鼠标按下的时候,记录Y轴偏移距离
              这个距离是一个比较的偏移位置

              当鼠标滑动的时候鼠标变化的位置，减去鼠标按下的时候
              记录的偏移位置，就是滚动条要移动的位置



            ***/
            var disY = e.clientY - this.offsetTop;
            var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
            // contentMaxT--包裹内容的div最大的top值
            var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
           
            console.log("down: disY : "+disY+"  cy: "+e.clientY+"-----top： "+this.offsetTop);
            if(scrollbar.setCapture){
            	scrollbar.setCapture();
            }
            document.onmousemove = function(ev) {            	
                var ev = ev || window.event;
                var T = ev.clientY - disY;
                if (T < 0) {
                    T = 0;
                }
                if (T > TMax) {
                    T = TMax;
                }
                var scale = T / TMax;
                content.style.top = -scale * contentMaxT+"px";
                console.log("disY  " + disY + "  cy  " + ev.clientY + "  T  " + T);
                scrollbar.style.top = T + "px";
                return false;
            }

            document.onmouseup = function() {
                document.onmouseup = document.onmousemove = null;
                if(scrollbar.releaseCapture){
            	scrollbar.releaseCapture();
            }
            }

            return false;
        }
    }
    </script>
</head>

<body>
    <div id="warpper">

        <span id="contentWrapper">
        	<span id="content">
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
           
</span>
        </span>
        <span id="scrollbarp">
            <span id="scrollbar"></span>
        </span>

    </div>
</body>

</html>

 

xie1987524
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js组件之----自定义滚动条
qq_40457310的博客
01-22 3636
知识点:原生js一般都会将对象封装在window对象原型中, 而jquery也可以将对象封装在$中 jquery的extend方法共有三种调用方法: 浅拷贝 $.extend(obj1, obj2) 深拷贝 $.extend(true, obj1, obj2) 位jquery原型添加对象$.extend({something: ...})之后就可以$.something调用. event.pre
DIV+CSS+javascript
qq_41541451的博客
01-06 482
2020-01-05 1、DIV+CSS DIV：div就是一个html标签，用于在页面上规划一定范围的区域，本身不可见，一般需要结合CSS一起使用。 CSS：就是层叠样式表，主要用来控制网页中的html内容显示的格式的 html中的标签用于规定网页的内容，那么CSS就是控制这些内容是如何显示的，开发都是采用html+css，可以达到内容和显示分离，css就是一系列格式的集合。 css的引入方式 方式一：行内式。 通过在每个html标签的style属性进行样式的设置 缺点：复用性差 方式二
自定义滚动条
weixin_33809981的博客
06-20 153
默认的html滚动条很难看，一些漂亮的网站，滚动条都是针对网站整体样式配套设计的。 在网上搜索到两种改造方式。一种是给默认滚动条设置样式，另一种是使用设计好的图片+css+js。 都挺好用的。 第一种（纯css）：完成后 .div{ scrollbar-face-color: #ebebeb;scrollbar-shadow-color: #ffffff; scrollbar-hi...
js自定义滚动条
elena_705的博客
04-07 218
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实现自定义滚动条
u013464954的专栏
10-15 520
js实现自定义滚动条，可鼠标拖动，滚动
JS原生实现自定义滚动条
while(true){alert(
07-21 1451
实现思路： 1.外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度)，在高的div里面设置5个div，每个div的高度，都和父级的高度相同 2.在外层div的右侧边框以里自定义一个滚动条，（本人用div设置样式作为滚动条） 3.最外层的div添加onmousewheel事件，使用e.wheelDelta来获取每次滑动的距离，若为正数则向上滑动，将每次增加...
利用div+jquery自定义滚动条样式的2种方法
10-27
本文将介绍两种使用div和jQuery自定义滚动条样式的常用方法。 首先，要生成滚动条，通常需要在需要滚动的div元素上设置CSS属性`overflow-x`和`overflow-y`为`auto`。例如，对于左边的菜单项div，我们可以这样设置：...
利用div+jquery自定义滚动条
07-18
总结起来，"利用div+jquery自定义滚动条"涉及到的关键知识点包括：HTML的`div`元素，CSS的`overflow`属性，jQuery的选择器和方法，以及自定义滚动条的插件和CSS样式。通过学习和实践这些技术，你可以创建出与网站...
JQuery+DIV自定义滚动条样式的具体实现
10-27
JQuery结合DIV自定义滚动条样式的具体实现是一个在Web前端开发中经常会遇到的场景，开发者需要使用jQuery库以及纯CSS或JavaScript技术来实现自定义的滚动条效果。以下知识点将详细介绍这种技术实现的原理和方法。 ...
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
10-26
同时，为了避免内容完全滚动出视窗后滚动条仍继续滚动的情况，我们需要在滚动距离超过内容宽度时，将滚动条重置到最左端。 CSS样式`white-space:nowrap;`保证了内容在同一行显示，而`overflow:hidden;`则隐藏了超出...
smoothscrollbar是一款高性能的纯JavaScript滚动条美化插件
08-07
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作，它具有高性能，自由配置，平滑滚动等特点，支持各种现代桌面浏览器和手机设备。
js原生封装自定义滚动条
weixin_34326429的博客
11-21 128
1 /* 2 * @Author: dothin前端 3 * @Date: 2015-11-21 00:12:15 4 * @Last Modified by: dothin前端 5 * @Last Modified time: 2015-11-21 00:29:12 6 */ 7 ! function() { 8 va...
原生js实现自定义滚动条组件开发
蒲公英芽的博客
01-28 1083
原生js实现自定义滚动条组件开发 功能需求： 1. 按照数据结构创建菜单内容，显示在页面中； 2. 点击一级菜单后，显示对应的二级菜单内容，如果整体内容溢出，则出现滚动条； 3. 滚动条的高度要随着整体内容高度的改变而改变。 4. 鼠标拖动滚动条，整体内容要随着向上滚动。 - 这个案例中包括折叠菜单和滚动条两个组件 ，所以可以分开来写，然后整合到一起。 - 折叠菜单中要考虑多级菜单出现的情况，使用递归来做，数据的结构一定要统一，方便对数据进行处理。 - 滚动条的创建中，有两个比例等式，一是**滚动条
JS控制滚动条，例如表格
[暂停使用]任先阳
11-28 1019
wheelDeltaY &gt; 0，向上滚动；wheelDeltaY &lt; 0，向下滚动        
利用源生js制作的匀减速滚动条工具
weixin_43774117的博客
12-08 167
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;style&gt; #div1{
js scrollTop, 滚动条操作
weixin_33720078的博客
03-13 366
设置页面加载时滚动条自动滚到底的方法： jQuery： 复制代码 代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); JavaScript： 复制代码 代码如下: w...
模拟滚动条
MagicWing的博客
10-28 417
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0;
【转载】HTML自定义滚动条（仿网易邮箱滚动条）
梦否
04-12 365
转载： 自定义滚动条 在web前端非常火爆的今天，...
利用js实现自定义滚动条
个人笔记
03-29 4454
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 530px; margin: 40px aut
原生html+css 手写滚动条
最新发布
05-30
好的，以下是一个基本的原生...这个示例使用了 WebKit 浏览器的滚动条样式设置，因此只适用于基于 WebKit 的浏览器（如 Chrome、Safari 等），如果需要兼容更多浏览器，可以使用 JavaScript 实现自定义的滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值