模拟滚动条控制内容滚动

每次页面内容超出范围的时候，为了美观，我们都会加上滚动条处理，要是浏览器默认滚动条无法满足美感的时候，我们需要自己模拟出一个符合需求的滚动条，如下：

模拟滚动条控制内容滚动

实现过程：

　1.简单样式：

#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
#div3 {width: 498px; height: 498px; border: 1px solid green; position: absolute; left: 50px; top: 10px;overflow: hidden;}
#div4 { position: absolute; left: 0; top: 0;}

2.结构

<body>
   <div >3.逻辑代码

<script>
window.onload = function() {

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');

var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;

   oDiv2.onmousedown = function(ev) {

var ev = ev || event;

var disY = ev.clientY - this.offsetTop;

      document.onmousemove = function(ev) {

var ev = ev || event;

var T = ev.clientY - disY;

if ( T < 0 ) {
            T = 0;
         } else if ( T > iMaxTop ) {
            T = iMaxTop;
         }

         oDiv2.style.top = T + 'px';

var iScale = T / iMaxTop;

         document.title = iScale;

         oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px';

      }

      document.onmouseup = function() {

         document.onmousemove = document.onmouseup = null;

      }

return false;

   }

}
</script>


分享技术，分享快乐！