原生js仿浏览器滚动条效果
2017-03-02 11:17
711 查看
效果图:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿浏览器滚动条</title> <style type="text/css"> *{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;} </style> </head> <body> <div id="demo"> <p id="dp">我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容</p> <div id="scrll"></div> </div> </body> <script type="text/javascript"> (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 < demo.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) var event = event || window.event; // 获取鼠标按下的页面坐标 // 滚动条滚动时只有top值改变,所有不需要获取pageX var pageY = event.pageY || event.clientY + document.documentElement.scrollTop; // 获取鼠标在scrll内的坐标 var scrllY = pageY - demo.offsetTop - scrll.offsetTop; // 给document绑定鼠标移动事件 document.onmousemove = function(event){ var event = event || window.event; // 获取鼠标移动时的坐标 var moveY = event.pageY || event.clientY + document.documentElement.scrollTop; // 获取滚动条的移动坐标 var trueY = 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) </script> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- 无缝滚动效果原生js
- 原生JS绑定滑轮滚动事件,兼容浏览器
- 原生JS练习计算器和banner条滚动效果
- 原生JS控制多个滚动条同步跟随滚动效果
- 原生Js无缝滚动效果的简单实现
- iscroll.js 触屏手机web-kit浏览器滚动效果代码库
- 原生js实现歌词滚动以及卡拉OK效果
- (原生JS) 图片无缝滚动、图片转化、轮播图、折叠效果
- 用js实现的图片在浏览器里面来回滚动效果 <兼容ie和ff>
- 不同浏览器下图片滚动效果的js
- 原生JS绑定滑轮滚动事件兼容常见浏览器
- 总结--原生js实现整屏滚动及其交互效果
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
- JS+CSS实现侧边栏跟随浏览器滚动效果
- 原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
- 原生JS绑定滑轮滚动事件兼容常见浏览器
- 原生 js 实现全屏滚动效果
- <js>jquery实现新闻滚动效果,ie11支持
- 原生js实现——轮播图效果
- js 原生判断内容区域是否滚动到底部