js如何实现浏览器滚动条

小编给大家分享一下js如何实现浏览器滚动条,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网页空间、营销软件、网站建设、北镇网站维护、网站推广。

效果图:

js如何实现浏览器滚动条

代码如下:




 
 仿浏览器滚动条
 
 *{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 < 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)

以上是“js如何实现浏览器滚动条”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享名称:js如何实现浏览器滚动条
浏览路径:http://hbruida.cn/article/gohjge.html

其他资讯