JavaScript自定义滚动条
原生JavaScript自定义滚动条
版权所有,如若转载请注明出处并附上本文链接 http://www.cnblogs.com/Pengxm-liveShare/p/5953810.html
由于项目需求需要用到滚动条, 但是浏览器自带的太丑, 而且每个浏览器显示的都不同, 所以自己编写了一个自定义的滚动条。 (由于是菜鸟, 写的比较乱, 大家仅供参考就好, 能提提意见改进下就更好了!)
话不多说先看下样式:
主要功能:
- 支持滚动条自定义样式(颜色, 大小)
- 支持鼠标事件(点击和滑轮滚动)
主要代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 list-style: none; 11 border: 0; 12 } 13 14 .scrollWrap { 15 margin: 200px auto; 16 width: 800px; 17 position: relative; 18 height: 300px; 19 border: 1px solid #ccc; 20 border-radius: 5px; 21 overflow: hidden 22 } 23 24 .scrollView, .scrollBar, .scrollBtn { 25 overflow: hidden; 26 height: 300px; 27 position: absolute; 28 top: 0; 29 right: 0; 30 width: 10px; 31 } 32 33 .scrollView { 34 left: 0; 35 width: 100%; 36 padding: 10px; 37 height: auto; 38 box-sizing: border-box; 39 moz-user-select: -moz-none; 40 -moz-user-select: none; 41 -o-user-select: none; 42 -khtml-user-select: none; /* you could also put this in a class */ 43 -webkit-user-select: none; /* and add the CSS class here instead */ 44 -ms-user-select: none; 45 user-select: none; /**禁止选中文字*/ 46 } 47 48 .scrollBar { 49 background-color: lightcoral; 50 border-radius: 5px; 51 } 52 53 .scrollBtn { 54 border-radius: 5px; 55 background-color: #cc00cc; 56 z-index: 100; 57 } 58 </style> 59 </head> 60 <body> 61 <div class="scrollWrap" id="scrollWrap"> 62 <div class="scrollView" id="scrollView"> 63 <p>哈哈哈哈 李 周 吴 郑 王 冯 陈 楮 卫 蒋 沈 韩 杨 朱 秦 尤 许 何 吕 施 张 孔 曹 严 华 金 魏 陶 姜 乐 于 时 傅 皮 卞 齐</p> 64 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 65 66 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 67 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 68 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 69 70 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 71 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 72 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 73 74 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 75 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 76 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 77 78 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 79 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 80 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 81 82 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 83 <p>呵呵呵额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 84 85 <p>xxx额呵呵 水 窦 章 云 苏 潘 葛 奚 范 彭 郎 鲁 韦 昌 马 苗 凤 花 方 俞 任 袁 柳 酆 鲍 史 唐 伍 余 元 卜 顾 孟 平</p> 86 </div> 87 <div class="scrollBar" id="scrollBar"> 88 <span class="scrollBtn" id="scrollBtn"></span> 89 </div> 90 </div> 91 </body> 92 </html> 93 <script> 94 (function () { 95 96 function Scroll(scrollWrap, scrollView, scrollBar, scrollBtn, scrollList) { 97 this.scrollWrap = document.getElementById(scrollWrap); 98 this.scrollView = document.getElementById(scrollView); 99 this.scrollBar = document.getElementById(scrollBar); 100 this.scrollBtn = document.getElementById(scrollBtn); 101 this.scrollList = document.getElementById(scrollList); 102 } 103 104 Scroll.prototype.setScroll = function () { 105 var _this = this, 106 scrollWrapHeight = _this.scrollWrap.offsetHeight, // 获取父级容器高度值; 107 scrollViewH = _this.scrollView.offsetHeight, // 获取滚动页面的高度 108 scrollBarH = _this.scrollBar.offsetHeight, // 获取滚动槽的高度 109 wrapTopH = _this.scrollWrap.offsetTop, // 获取body容器到父级容器的高度值; 110 scrollBtnH = scrollWrapHeight * scrollBarH / scrollViewH; 111 // 给滑动按钮设置最小高度 112 if (scrollBtnH <= 40) { 113 scrollBtnH = 40; 114 } else if (scrollBtnH >= scrollBarH) { 115 scrollBtnH = 0; 116 _this.scrollBar.style.display = 'none'; 117 _this.scrollView.style.paddingRight = 0; 118 } 119 // 动态设置滑动按钮的高度 120 _this.scrollBtn.style.height = scrollBtnH + 'px'; 121 // console.log('滑动按钮高度 ' + scrollBtnH + 'px'); 122 // 鼠标点击事件 123 var defaults = { 124 addEvent: function (event) { 125 var event = event || window.event; 126 var touchPageY = event.pageY - wrapTopH; 127 if (touchPageY < scrollBtnH / 2) { 128 touchPageY = scrollBtnH / 2; 129 } else if (touchPageY > (scrollBarH - scrollBtnH / 2)) { 130 touchPageY = (scrollBarH - scrollBtnH / 2); 131 } 132 if (scrollBtnH == 0) { 133 touchPageY = 0; 134 } 135 136 //保持滑块中心滚动 touchPageY - scrollBtnH/2 137 _this.scrollBtn.style.top = touchPageY - scrollBtnH / 2 + 'px'; 138 _this.scrollView.style.top = -(touchPageY - scrollBtnH / 2) * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px'; 139 }, 140 scrollFunc: function (event) { 141 var scrollTop = _this.scrollBtn.offsetTop; 142 var btnTop = 0; // 滑块top值 143 if (event.wheelDelta) {//IE/Opera/Chrome 144 if (event.wheelDelta > 0) { 145 btnTop = scrollTop - 50; // 设定每次滚轮移动 50px 146 if (btnTop < 0) { 147 btnTop = 0; 148 } 149 } else { 150 btnTop = scrollTop + 50; 151 if (btnTop > (scrollBarH - scrollBtnH)) { 152 btnTop = (scrollBarH - scrollBtnH); 153 } 154 } 155 } else if (event.detail) {//Firefox 156 if (event.detail > 0) { 157 btnTop = scrollTop + 50; 158 if (btnTop > (scrollBarH - scrollBtnH)) { 159 btnTop = (scrollBarH - scrollBtnH); 160 } 161 162 } else { 163 btnTop = scrollTop - 50; 164 if (btnTop < 0) { 165 btnTop = 0; 166 } 167 } 168 } 169 _this.scrollBtn.style.top = btnTop + 'px'; 170 _this.scrollView.style.top = -btnTop * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px'; 171 } 172 }; 173 // 监听鼠标点击 174 _this.scrollBtn.onmousedown = function () { 175 document.onmousemove = function (event) { 176 defaults.addEvent(event); 177 } 178 }; 179 document.onmouseup = function () { 180 document.onmousemove = null; 181 }; 182 _this.scrollBar.onclick = function (event) { 183 defaults.addEvent(event); 184 }; 185 186 // 滚轮事件 187 if (document.addEventListener) { 188 document.addEventListener('DOMMouseScroll', defaults.scrollFunc, false); 189 }//W3C 190 _this.scrollList.onmousewheel = defaults.scrollFunc;//IE/Opera/Chrome/Safari 191 192 }; 193 194 195 document.addEventListener("DOMContentLoaded", function () { 196 var scroller = new Scroll('scrollWrap', 'scrollView', 'scrollBar', 'scrollBtn', 'scrollView'); 197 scroller.setScroll(); 198 }); 199 })(); 200 201 </script>
View Code
转载于:https://www.cnblogs.com/Pengxm-liveShare/p/5953810.html
JavaScript自定义滚动条相关推荐
- html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
- 自定义滚动条Js简版
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...
- 自定义滚动条,可用滚轮控制,兼容各浏览器
自定义滚动条的原理其实也是拖拽. <!doctype html> <html> <head> <meta charset="utf-8"& ...
- H5移动端开发基础(三)自定义滚动条、实战-音悦台
自定义滚动条.实战-音悦台 自定义滚动条 js封装 transform.js tween.js scrollBar.js 音悦台 适配 样式 html js 自定义滚动条 *{margin: 0;pa ...
- 自定义滚动条组件封装
HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- JQuery实现自定义滚动条
在页面中虽然可以通过CSS修改滚动条的样式,但是部分属性是无法自己修改和设置的,而且不同浏览器存在兼容问题,因此通过JS来实现滚动条在自定义滚动条的环境下也是有必要的. 接下来,我们来实现上图两种情况 ...
- LabVIEW设计自定义滚动条
在讲解自定义滚动条之前,我们先了解一下,如何动态控制常规的滚动条控件,效果如下所示: 这是使用LabVIEW自带的滑动控件,鼠标右键,选择:"数值",可以看到各式各样的滑动杆控件, ...
- FineReport中如何用JavaScript自定义地图标签
2019独角兽企业重金招聘Python工程师标准>>> 在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地 ...
- JavaScript 自定义对象
原文:JavaScript 自定义对象 在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式: ...
最新文章
- matlab画多个垂直的线段,新手求助,图形最后多出一条垂直线
- IPad开发之有帮助的开发工具
- php OpenSSL 加解密
- 用cmd运行java可以javac不行(win10)
- php获取本机ip外网地址,php获取本机ip(远程IP地址)
- 有意思的逻辑思维题(一)(hdu2018,2160,2053)
- java后端简历项目经历_为了面试字节跳动后端开发岗(Java)鬼知道我经历了什么.....
- python面试题之请谈谈.pyc文件和.py文件的不同之处
- 解决Windows 2003终端服务许可证过期的办法
- html中的空格表示
- 常见视频编码比较大全 常见视频解码技术资料1
- 高质量c/c++编程(3)
- MCU——JLINK接外部电源调试问题
- 未定义jm matlab,math – 使用Jm 1 = 2mj(m)-j(m-1)公式在MATLAB中计算bessel函数
- c语言课后练习题第三章
- 跟着团子学SAP PS:项目版本管理-项目模拟功能(CJV1/CJV2/CJV3/CJV4)
- day06笔记(2021-09-28)-OOP:面向对象+封装+继承+多态
- Maven读书系列:Maven仓库
- Android Text文字详解
- 蚂蚁java一二三面面经