原生JS怎么实现自定义滚动条效果 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下原生JS怎么实现自定义滚动条效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

JS是什么

JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。

具体内容如下

<强>实现思路:

1。外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度),在高的div里面设置5个div,每个div的高度,都和父级的高度相同
2。在外层div的右侧边框以里自定义一个滚动条,(本人用div设置样式作为滚动条)
3。最外层的div添加onmousewheel事件,使用e.wheelDelta来获取每次滑动的距离,若为正数则向上滑动,将每次增加的数,赋给滚动条的值,若为负数则向下互动,将每次减少的值,赋值给滚动条的值,并对特别高的div作对应的上下平移处理
4。注意:滚动条的高度需要和高的div的高度成比例滑动

& lt; ! DOCTYPE html>, 　　& lt; html>, 　　,,& lt; head> 　　,,,& lt; meta charset=癠TF-8"祝辞, 　　,,,& lt; title>自定义滚轮事件& lt;/title>, 　　,,,& lt; style 类型=拔谋?css"祝辞, 　　,,,,,* {, 　　,,,,,,,填充:,0;, 　　,,,,,,,保证金:,0;, 　　,,,,,}, 　　,,,,,#包装{, 　　,,,,,,,身高:,500 px,, 　　,,,,,,,宽度:,300 px,, 　　,,,,,,,位置:,相对的,, 　　,,,,,,,/*超出隐藏*/, 　　,,,,,,,溢出:,隐藏,, 　　,,,,,,,保证金:,200 px auto 0;, 　　,,,,,,,边界:,3 px solid 黑色,, 　　,,,,,}, 　　,,,,,#{内容, 　　,,,,,,,宽度:,300 px,, 　　,,,,,,,/*不需要设置高度,可被图片撑开*/, 　　,,,,,,,位置:,绝对的,, 　　,,,,,,,左:,0;, 　　,,,,,,,:,0;, 　　,,,,,,,边界:,1 px solid 红色,, 　　,,,,,}, 　　,,,,,# content 祝辞,div {, 　　,,,,,,,宽度:,294 px,, 　　,,,,,,,/*去除图片间的间隙*/, 　　,,,,,,,vertical-align:,,, 　　,,,,,,,身高:,500 px,, 　　,,,,,,,边界:,1 px solid 红色,, 　　,,,,,,,text-align:,中心,, 　　,,,,,,,字体大小:,100 px,, 　　,,,,,,,行高:,500 px,, 　　,,,,,}, 　　,,,,,# sliderWrap {, 　　,,,,,,,身高:100%,,, 　　,,,,,,,宽度:16 px ,, 　　,,,,,,,背景颜色:,greenyellow;, 　　,,,,,,,位置:,绝对的,, 　　,,,,,,,对的:,0;, 　　,,,,,,,:,0;, 　　,,,,,}, 　　,,,,,#滑块{, 　　,,,,,,,宽度:,10 px;, 　　,,,,,,,身高:,50 px;, 　　,,,,,,,背景颜色:,蓝色,, 　　,,,,,,,位置:,绝对的,, 　　,,,,,,,左:,3 px;, 　　,,,,,,,:,0 px;, 　　,,,,,,,这个特性:,10 px;, 　　,,,,,}, 　　,,,& lt;/style>, 　　& lt;/head>才能, 　　,,& lt; body> 　　,,,& lt; div id=皐rap"祝辞, 　　,,,,,& lt; div id=癱ontent"祝辞, 　　,,,,,,,& lt; div> 1 & lt;/div>, 　　,,,,,,,& lt; div> 2 & lt;/div>, 　　,,,,,,,& lt; div> 3 & lt;/div>, 　　,,,,,,,& lt; div> 4 & lt;/div>, 　　,,,,,,,& lt; div> 5 & lt;/div>, 　　,,,,,& lt;/div>, 　　,,,,,& lt; !——右侧滚动条部分,祝辞, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null