js-自定义滚动条

最新推荐文章于 2018-10-24 20:24:50 发布
最新推荐文章于 2018-10-24 20:24:50 发布
阅读量217 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/albb58/article/details/82118696
版权

鼠标滚轮事件

FireFox : DOMMouseScroll

e.detail 向下滚动为 3 向上滚动 -3

非FireFox : onmousewheel

e.wheelDelta 向下滚动-120 向上滚动120

自定滚动条源码

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #box {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .ball {
            width: 100%;
            height: 500px;
        }

        #scroll {
            width: 6px;
            height: 96%;
            position: fixed;
            top: 2%;
            right: 5px;
            border-radius: 3px;
            background-color: rgba(235, 233, 233, 0.5);
            z-index: 9998;
            opacity: 1;
        }

        #scrollBar {
            position: absolute;
            z-index: 9999;
            width: 6px;
            height: 20px;
            border-radius: 3px;
            left: 0;
            top: 0;
            background-color: #383838;
        }
    </style>
</head>

<body style="overflow:hidden;">
    <div id="box">
        <div id="content">
            <p class="ball" style="background-color:lightpink;"></p>
            <p class="ball" style="background-color:blue;"></p>
            <p class="ball" style="background-color:yellow;"></p>
            <p class="ball" style="background-color:lightpink;"></p>
            <p class="ball" style="background-color:blue;"></p>
            <p class="ball" style="background-color:yellow;"></p>
        </div>
    </div>
    <div id="scroll">
        <div id="scrollBar"></div>
    </div>
</body>

</html>
<script type="text/javascript">
    var content = document.getElementById("content");
    var box = document.getElementById("box");
    var scroll = document.getElementById("scroll");
    var scrollBar = document.getElementById("scrollBar");
    var data = 30;

    //  浏览器的可视高度减/页面的总高度*滚动栏的总高度=滚动按钮的高度
    var _eight;
    window.onresize = function (){
        init();
    }
    function init (){
        _height = window.innerHeight * scroll.offsetHeight / content.offsetHeight;
        scrollBar.style.height = _height + "px";
    }
    init();



    //火狐
    box.addEventListener("DOMMouseScroll", function (e) {
        var e = e || event;
        if (e.detail > 0) {//向下滚动
            box.scrollTop += data;
        } else {//向上滚动
            box.scrollTop -= data;
        }
        //浏览器的滚动距离/(页面的总高度-浏览器的可视高度)* (滚动栏的总高度-滚动按钮的高度)= 滚动的距离
        var _top = box.scrollTop * (scroll.offsetHeight - scrollBar.offsetHeight) / (content.offsetHeight - window.innerHeight);
        scrollBar.style.top = _top + "px";
    });

    //非火狐
    box.addEventListener("mousewheel", function (e) {
        var e = e || event;
        if (e.wheelDelta > 0) {//向上滚动
            box.scrollTop -= data;
        } else {//向下滚动
            box.scrollTop += data;
        }
        //浏览器的滚动距离/(页面的总高度-浏览器的可视高度)* (滚动栏的总高度-滚动按钮的高度)= 滚动的距离
        var _top = box.scrollTop * (scroll.offsetHeight - scrollBar.offsetHeight) / (content.offsetHeight - window.innerHeight);
        scrollBar.style.top = _top + "px";
    });

</script>
albb58
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js分页显示
wendy专栏
03-28 776
1.HTML页面中代码如下&lt;div class="page"&gt; &lt;/div&gt;2.HTML中js代码引用&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/model.js"&gt;&lt;/script&gt; &amp
JS方法常用方法汇总
热门推荐
飞翔的小白
08-28 3万+
* String----&gt;是一个对象     * 字符串可以看成是字符组成的数组,但是js中没有字符类型     * 字符是一个一个的,在别的语言中字符用一对单引号括起来     * 在js中字符串可以使用单引号也可以使用双引号     * 因为字符串可以看成是数组,所以,可以通过for循环进行遍历     *     * 字符串特性:不可变性,字符串的值是不能改变     *...
移动端 js关闭当前窗口
小白
03-28 1万+
移动端window.close() 不起作用， 微信端关闭当前页面： WeixinJSBridge.call('closeWindow');
js中倒计时学习笔记
冰雪为融的博客
08-31 205
倒计时原理：未来的时间点-现在的时间点// 现在的时间点（在变）  var iNow = new Date(); // 未来的时间点（不变） //下面两种方法都可以定义未来的时间点 // var iNew = new Date( 2013, 10, 27,  21,56,0  ); var iNew = new Date( 'November 27,2013 22:3:0' ); // 数...
js操作cookie
qq_34456362的博客
03-26 132
/** * * @param {有效期} maxage * @param {作用域} path */ function cookieStorage(maxage, path) { var cookie = (function () { var cookies = {}; //该对象会最终返回 var all = document.cookie;...
原生JS实现自定义滚动条效果
10-19
使用原生JavaScript实现自定义滚动条涉及到DOM操作、事件处理、CSS布局和样式定义等多个方面的技术。本文将详细介绍如何通过原生JavaScript实现一个自定义的滚动条效果。 首先，我们来看实现自定义滚动条的基本思路...
JS自定义滚动条效果
11-21
本文将介绍如何使用JavaScript实现自定义滚动条效果。滚动条通常由浏览器默认样式提供，但通过CSS和JavaScript，我们可以对其进行自定义，使其更加美观且符合设计需求。 首先，我们需要在HTML中设置一个容器来模拟...
JS自定义滚动条效果简单实现代码
12-11
本文实例为大家分享了JS自定义滚动条效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style...
x-scrollbar 自定义滚动条插件
06-29
"x-scrollbar"是一款专为JavaScript开发的自定义滚动条插件，它提供了丰富的定制选项，让开发者能够轻松地创建出符合网站风格的滚动条。这款插件尤其适合那些希望在网页中实现半透明悬浮滚动条，或者需要仅水平滚动...
深入浅出js学习笔记
weixin_39537579的博客
08-27 203
  关于==运算符 以下几种情况结果为true &lt;1&gt;null == undefined &lt;2&gt;number == string 会把string转为number 1 == '1.0' //true &lt;3&gt;bollean == ? 对于bollean值 不管问好是什么 都会吧bollean转换为number true为1 false为0 1==true...
排列组合算法实现--基于JS
starking的博客
05-13 7720
公司要做了个彩票的预测奖金业务，居然要用到高中的排列组合，好吧，这个时候不得不承认，高中没有白上啊..... 排列组合的思想大家都清楚（不清楚的请回高中自行面壁。）   C n n一下子理不清，于是我从最简单的C n  2开始 C n 2代码： /** * 排列组合(C n 2) 从n个数中选出2个数的所有情况。 * @param self 第一位（两位数的第一位） *
原生js实现Ajax
raquelle的记忆宫殿
03-31 198
原文链接：https://www.cnblogs.com/colima/p/5339227.html一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？    JQuery提供的Ajax方法：$.ajax({ url: , type: '', dataType: '', data: { ...
Js实现div移动
qq_33420835的博客
08-27 1万+
描述：点击按钮，div移动，并指定停止位置，（定时器） &lt;script&gt; window.onload=function () { var timer=null; var btn1=document.getElementById("btn1"); btn1.onclick=function () { ...
js把html页面打印成png图片（实测，可用）
k912120的博客
10-23 4267
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;ceshi&lt;/title&gt; &lt;style&gt; .test h3{ width: 100px; height: 10
js实现时间段选择（select） API
qq_36171451的博客
10-24 3296
&lt;style&gt; #_contents{ display: flex; display: -webkit-flex; display: -webkit-box; display: -moz-flex; } #_contents select{ width:50px; } &lt;/style&gt; &lt;script&gt; var str = ""; docu...
js数组操作大全
weixin_30484739的博客
12-29 395
shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined Javascript代码 vara=[1,2,3,4,5]; varb=a.shift();//a:[2,3,4,5]b:1 unshift:将参数添加到原数组开头，并返回数组的长度 Javascript代码 ...
我理解的JS事件轮询机制
Metropolis_cn的博客
03-26 3435
JS是单线程语言，深入理解JS里的Event Loop 划重点！！！ JS的执行机制(一)： 1.首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table 2.异步任务在event table中注册函数,当满足触发条件后,被推入event queue 3.同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务...
js获取网络类型
孤云博客
03-28 8783
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 function getNetworkType() { var ua = navigator.userAgent; var networkStr = u...
js 冒泡事件
qq_42467563的博客
10-23 243
说明：当下层元素和上层元素支持同一事件，当上层事件触发时，下层事件也触发，这就叫事件冒泡。 取消事件冒泡：ev.cancelBubble = true &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&amp
使用JavaScript自定义滚动条解决方案
文档中包含了一个名为`scrollbar.js`的React组件代码示例，该组件用于实现自定义滚动条功能，并且依赖于`prop-types`库进行props验证，以及一个外部CSS文件`scrollbar.css`来设定滚动条的样式。" 在实际的前端开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值