js自定义滚动样式
Posted 魏耀峰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js自定义滚动样式相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <style type=\'text/css\'> 6 7 html{ 8 overflow: hidden; 9 } 10 11 #scroll{ 12 width: 800px; 13 margin: 100px auto; 14 padding: 10px 30px 10px 10px; 15 border: 1px solid #ccc; 16 border - radius: 4px; 17 height: 500px; 18 overflow: hidden; 19 position: relative; 20 } 21 #scroll-bar{ 22 position:absolute; 23 width:10px; 24 left: 0px; 25 top: 0px; 26 border-left: 1px solid #ccc; 27 border-radius: 4px; 28 } 29 #bar{ 30 width:10px; 31 border-top: 1px solid #ccc; 32 border-bottom: 1px solid #ccc; 33 border-radius: 4px; 34 background-color: #ccc; 35 } 36 </style> 37 </head> 38 <body> 39 <div id = \'scroll\'> 40 <div id=\'content\'> 41 <p> 42 <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows: 43 0; orphans:0; font-size:12pt"> 44 <span style="font-family:\'\'微软雅黑\'\'"> 45 我们不可以借口发展经济而污染环境。 46 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 47 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 48 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 49 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 50 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 51 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 52 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 53 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 54 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 55 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 56 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 57 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 58 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 59 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 60 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 61 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 62 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 63 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 64 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 65 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 66 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 67 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 68 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 69 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 70 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 71 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 72 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 73 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 74 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 75 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 76 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 77 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 78 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 79 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 80 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 81 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 82 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 83 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 84 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 85 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 86 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 87 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 88 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 89 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 90 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 91 我们不可以借口发展经济而污染环境。 92 （on the pretence of） 93 </span> 94 </p> 95 <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:0; orphans:0; font-size:12pt"><span style="font-family:\'\'微软雅黑\'\'"> </span></p> 96 </p> 97 </div> 98 <div id=\'scroll-bar\'> 99 <div id = \'bar\'></div> 100 </div> 101 </div> 102 103 <script type = \'text/javascript\'> 104 // 原理就是 框体有大小，内容无大小，框体超出部分隐藏 内容自动撑开, 根据比例获得滑块和滑框来进行滑动,滑块到顶部的距离，再换算成 内容-margin-top 105 window.onload = function(){ 106 var scroll = document.getElementById(\'scroll\'); 107 var content = document.getElementById(\'content\'); 108 var scrollBar = document.getElementById(\'scroll-bar\'); 109 var bar = document.getElementById(\'bar\'); 110 var scrollH = scroll.offsetHeight; 111 var contentH = content.offsetHeight; 112 // 滚动条框 和框体的高度是一样的 113 scrollBar.style.height = scrollH + \'px\'; 114 // 开始我想用right的,但是ie7 不兼容 115 scrollBar.style.left = scroll.offsetWidth - 12 + \'px\'; 116 // 滚动条的高度等于 框体高*(框体的高度比上内容的高度) (小学数学); 117 bar.style.height = scrollH * (scrollH / contentH) + \'px\'; 118 var isMove = false;//是否开启滑动 119 var oldY = 0;//滑动之前的老位置 初始化为0 120 bar.onmousedown = function(event){ 121 var event = event || window.event; 122 oldY = event.clientY; 123 isMove = true; 124 return false; 125 } 126 document.onmouseup = function(){ 127 isMove = false; 128 return false; 129 } 130 document.onmousemove = function(event){ 131 var event = event || window.event; 132 if (isMove) { 133 // 滚动条变化的值 dirY 134 var dirY = event.clientY - oldY; 135 goOn(dirY); 136 oldY = event.clientY; 137 } 138 } 139 // 滚动事件 140 scroll.onmousewheel = function(event) 141 { 142 var event = event || window.event; 143 // event.wheelDelta 每次滚动都是+-120 这里设置一个系数 120 太大了更适合浏览器的滚动 144 goOn(-event.wheelDelta * 0.2); 145 return false; 146 } 147 function goOn(dirY) 148 { 149 // 滚动条滚动 150 bar.style.marginTop = bar.offsetTop + dirY + \'px\'; 151 // 越界处理 152 if (bar.offsetTop < 0) 153 { 154 bar.style.marginTop = \'0px\'; 155 } 156 if ((bar.offsetTop + bar.offsetHeight) > scrollBar.offsetHeight) 157 { 158 bar.style.marginTop = scrollBar.offsetHeight - bar.offsetHeight + \'px\'; 159 } 160 // 内容框的margin-top 161 content.style.marginTop = -bar.offsetTop / ((scrollH - 10) / contentH) + \'px\'; 162 } 163 } 164 </script> 165 </body> 166 167 168 </html>
以上是关于js自定义滚动样式的主要内容，如果未能解决你的问题，请参考以下文章