最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
原生js仿浏览器滚动条效果
时间:2017-05-16 编辑:简简单单 来源:一聚教程网
效果图:
代码如下:
代码如下 | 复制代码 |
*{margin: 0;padding: 0;} #demo{width: 300px;height: 500px;border: 1px solid red;margin:100px;position:relative;overflow:hidden;} p{padding:5px 20px 5px 5px;font-size:26px;position:relative;} #scrll{width:18px;border-radius:18px;position:absolute;top:0;right:0;background:red;cursor:pointer;}
(function(window){ function $(id){ return document.getElementById(id); }; // 获取对象 var dp = $("dp"),demo = $("demo"),scrll = $("scrll"); // 获取dp的长度 var dpHeight = dp.offsetHeight; // 获取demo的长度 var demoHeight = demo.offsetHeight; // 根据比值计算scrll的长度 var scrllHeight = demoHeight * demoHeight / dpHeight ; // 如果内容长度小于窗口长度,则滚动条不显示 if( dp.offsetHeight scrllHeight=0; }; scrll.style.height=scrllHeight+ "px"; // 获取滚动条和内容移动距离的比例 var bilu = ( dp.offsetHeight - demo.offsetHeight ) / (demo.offsetHeight - scrll.offsetHeight); // 滚动条滚动事件 scrll.onmousedown=function(event){ // event兼容性解决 // console.log(demo.offsetTop) varevent= event || window.event; // 获取鼠标按下的页面坐标 // 滚动条滚动时只有top值改变,所有不需要获取pageX varpageY=event.pageY || event.clientY + document.documentElement.scrollTop; // 获取鼠标在scrll内的坐标 varscrllY=pageY- demo.offsetTop - scrll.offsetTop; // 给document绑定鼠标移动事件 document.onmousemove=function(event){ varevent= event || window.event; // 获取鼠标移动时的坐标 varmoveY=event.pageY || event.clientY + document.documentElement.scrollTop; // 获取滚动条的移动坐标 vartrueY=moveY- scrllY - demo.offsetTop ; // 限制滚动条移动的范围 if( trueY < 0 ){ trueY=0; }; if( trueY > demo.offsetHeight - scrll.offsetHeight ){ trueY = demo.offsetHeight - scrll.offsetHeight; }; scrll.style.top = trueY + "px"; //清除选中文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 获取文字区域移动的距离 var dpY = trueY * bilu ; dp.style.top = - dpY + "px"; } }; // 鼠标抬起清除鼠标移动事件 document.onmouseup = function(){ document.onmousemove = null; } })(window) |