RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
js如何实现浏览器滚动条-创新互联

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

创新互联建站主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务罗源,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

效果图：

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如何实现浏览器滚动条”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享题目：js如何实现浏览器滚动条-创新互联
链接地址：http://lswzjz.com/article/pogci.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.lswzjz.com

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-13

乐山大橙子建站 乐山网站建设 乐山网站设计 乐山网站制作 成都做网站