<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>模拟滚动条</title> <!-- <link rel="stylesheet" type="text/css" href="custom-bar.css" /> --> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}html{font-size: 12px;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}table{border-collapse:collapse;border-spacing:0;}q:before,q:after{content:'';}object,embed{vertical-align:top;}hr,legend{display:none;}img,abbr,acronym,fieldset{border:0;}ul li{list-style-type:none;}a,label{cursor:pointer;}img{vertical-align:bottom;margin:0;padding:0;}a{text-decoration:none;outline: none;}.clearfix:after{content: "."; visibility: hidden; display: block; height: 0.1px; font-size:0.1em; line-height: 0; clear: both;}.clearfix {*zoom:1;}input ,textarea,select{outline: none;border:1px solid #bfbfbf;}th{font-weight: 400;} button{cursor: pointer;border:none;outline: none;}textarea{border: 1px solid #ccc;resize: none;outline: none;overflow: hidden;padding: 5px;}select{outline: none;}.text_overflow{overflow:hidden;white-space: nowrap; text-overflow: ellipsis;} html { font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif; font-size:14px; color: #5c5d5e; -webkit-font-smoothing: antialiased; /*chrome、safari*/ -moz-osx-font-smoothing: grayscale;/*firefox*/ } .bar-wrap { width:200px; height:400px; background:#000; overflow:hidden; position:relative; } .bar-wrap .content-subject { position:absolute; left:0; top:0; float:left; width:100%; } .bar-wrap .scroll-box { display:none; position:relative; float:right; width:8px; height:100%; background: #333; } .bar-wrap .scroll-bar { position:absolute; left:0; top:0; width:100%; height:30px; border-radius: 6px; background:red; cursor: default; } .prompt-explain { margin-bottom: 50px; border: 2px dotted blue; line-height: 1.5; padding: 10px; } .bar-wrap .test li { height: 200px; } .bar-wrap .test li:nth-child(odd) { background-color: blue; } .bar-wrap1 { margin-top: 50px; width:300px; height:300px; background:#000; overflow:hidden; position:relative; } .bar-wrap1 .test li:nth-child(odd) { background-color: orange; } .bar-wrap .scroll-box1 { display:none; position:relative; float:right; width:10px; height:100%; background: green; } .bar-wrap .scroll-bar1 { position:absolute; left:0; top:0; width:100%; height:30px; border-radius: 6px; background: linear-gradient(yellow, red); cursor: default; } </style></head><body> <div class="prompt-explain"> <dl> <dt>自定义滚动条组件说明:</dt> <dd> <p>作用：该组件用于模拟系统滚动条</p> <p>依赖:依赖custom-bar.css</p> <div> <p>参数：var cus = new CustomBar(custom, {scrollBarType : 'scroll-bar1',scrollBoxType : 'scroll-box1',});</p> <p>1.obj:整个组件要绑定的dom节点（必须）</p> <p>2.scrollBarType:滚动条的样式（可选，写法要参考custom-bar.css里面的默认写法）</p> <p>3.scrollBoxType:滚动条底部的样式（可选，写法要参考custom-bar.css里面的默认写法）</p> </div> <p>兼容：IE8+</p> </dd> </dl> </div> <div class="bar-wrap"> <div class="content-subject"> <!-- 这里写内容 --> <ul class="test"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="scroll-box"> <div class="scroll-bar"></div> </div> </div><div class="bar-wrap bar-wrap1">
<div class="content-subject"> <!-- 这里写内容 --> <ul class="test"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="scroll-box"> <div class="scroll-bar"></div> </div> </div><script>;(function(win, doc) { function CustomBar(obj, options) { this.barWrap = obj; this.contenSubject = obj.querySelector('.content-subject'); this.scrollBox = obj.querySelector('.scroll-box'); this.scrollBar = obj.querySelector('.scroll-bar'); this.scale = 1; this.top = 0; options = options || {}; this.init(options); } CustomBar.prototype = { constructor: CustomBar, init : function(options) { this.scale = this.barWrap.clientHeight / this.contenSubject.scrollHeight; if( this.scale>=1 ) { this.scale = 1; } else { this.scrollBar.className += ' ' + options.scrollBarType; this.scrollBox.className += ' ' + options.scrollBoxType; this.scrollBox.style.display = 'block'; this.contenSubject.style.width = this.barWrap.offsetWidth - this.scrollBox.offsetWidth + 'px'; this.height = this.barWrap.clientHeight * this.scale; this.maxTop = this.scrollBox.scrollHeight - this.height; this.scrollBar.style.height = this.height + 'px'; this.eventBind(); } }, eventBind : function() { var oThis = this; this.scrollBar.onmousedown = function(event) { var event = event || win.event, orginY = event.clientY - this.offsetTop; doc.onmousemove = function(event) { var event = event || win.event; win.event ? win.event.returnValue = false : event.preventDefault(); oThis.top = event.clientY - orginY; oThis.top = Math.max(0, Math.min(oThis.maxTop, oThis.top)); oThis.contenScroll(); }; doc.onmouseup = function() { doc.onmouseup = doc.onmousemove = null; }; }; this.barWrap.onmousewheel = function(event) { oThis.wheelEvent(); }; if( navigator.userAgent.indexOf("Firefox")>0 ) { this.barWrap.addEventListener('DOMMouseScroll', function(event){ oThis.wheelEvent(event); }, false); } }, wheelEvent : function(event) { var oThis = this, event = event || window.event, wheel = event.wheelDelta || event.detail, isDown = true; win.event ? win.event.returnValue = false : event.preventDefault(); event.wheelDelta ? (isDown = wheel<0 ? true : false) : (isDown = wheel>0 ? true : false); isDown ? oThis.top+=10 : oThis.top-=10; oThis.contenScroll(); }, contenScroll : function() { this.top = Math.max(0, Math.min(this.maxTop, this.top)); this.scrollBar.style.top = this.top + 'px'; this.contenSubject.style.top = - this.top / this.scale+ 'px'; } }; win.CustomBar = CustomBar;})(window, document);</script><script> var custom = document.querySelector('.bar-wrap'); new CustomBar(custom); var custom = document.querySelector('.bar-wrap1'); var cus = new CustomBar(custom, { scrollBarType : 'scroll-bar1', scrollBoxType : 'scroll-box1', });</script></body></html>