自制一个滚动条

参考文章：【https://blog.csdn.net/u014205965/article/details/45972803】
 1 <html>
 2     <head>
 3         <title>自定义滚动条</title>
 4         <style>
 5             #parent{
 6                 width: 400px;
 7                 height: 30px;
 8                 background: lightgrey;
 9                 position: relative;
10             }
11 
12             #child{
13                 width: 30px;
14                 height: 30px;
15                 background: greenyellow;
16                 position: absolute;
17             }
18             #box {
19                 width: 0;
20                 height: 0;
21                 background: blueviolet;
22             }
23         </style>
24     </head>
25     <body>
26         <div id="parent">
27             <div id="child"></div>
28         </div>
29         <div id="box"></div>
30         <script>
31 
32             window.onload=function() {
33                 var oParent = document.getElementById('parent');
34                 var oChild = document.getElementById('child');
35                 var disX = 0;
36                 oChild.onmousedown = function (ev) {
37                     var ev = ev || window.event;
38                     disX = ev.clientX - oChild.offsetLeft;
39                     document.onmousemove = function (ev) {
40                         var ev = ev || window.event;
41                         var oBox = document.getElementById('box');
42                         // 限制小Div拖动范围
43                         var L = ev.clientX - disX;
44 
45                         if (L<0) {
46                             //因为小div是相对大div定位的，所以当拖到大div的最左边的时候，小div的left就为0了
47                             L = 0;
48                         }
49 
50                         if (L > oParent.offsetWidth - oChild.offsetWidth) {
51                             L = oParent.offsetWidth - oChild.offsetWidth;
52                         }
53 
54                         // 定义一个滚动的比例,因为L的大小是由上面的判断语句决定的，所以scale需要定义在判断语句下面，定义在上面会出问题
55                         var scale = L/(oParent.offsetWidth - oChild.offsetWidth);
56                         oChild.style.left = L + 'px';
57                         oBox.style.width = scale * 300 + 'px';
58                         oBox.style.height = scale * 300 + 'px';
59                         
60                     }
61                     document.onmouseup = function () {
62                         document.onmousemove = null;
63                         document.onmouseup = null;  
64                     }
65                     return false;
66                 }
67             }
68         </script>
69     </body>
70 </html>
猜你喜欢
