原生js模仿浏览器滚动条效果

渲染：

代码如下：

！doctype html lang=' en ' head meta charset=' utf-8 ' title模仿浏览器滚动条/title style type=' text/CSS ' * { margin : 0；padd : 0；} # demo { width: 300px高度： 500 px；border: 1px纯红；margin:100px位置：相对；飞越：隐藏；} p { padding:5px 20px 5px 5pxfont-size :26 px；位置：相对；} # scrll { width:18pxborder-radius :18 px；位置：绝对；top:0right:0背景：红色；cursor:pointer指针；}/style/headsdydiv id=' demo ' p id=' DP '我是字面意思，我是字面意思，我是字面意思，我是字面意思，我是字面意思，我是字面意思，我是字面意思，我是字面意思。我在写作，我在写作，我在写作，我在写作，我在写作，我在写作，我在写作，我在写作，我在写作，我在写作，我在写作，我在写作。文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容/p div id=' scrll '/div/div/body script type=' text/JavaScript '(函数(window){ function $(id){ return document . getelementbyid(id)；};//get对象var DP=$ ('DP ')，demo=$ ('demo ')，scrll=$(' scrll ')；//获取dp var的长度dpHeight=dp.offsetHeight//获取demo var demo height=demo . offset theight的长度；//根据比值var scrllh h8=demo height * demo height/DP height计算scrll的长度；//如果内容长度小于窗口长度，滚动条不会显示if (dp。offsetheightdemo。offset theight){ scrllh h8=0；};scrll . style . height=scrllh8g ' px '；//获取滚动条与内容移动距离的比值：varbilu=(DP . offset heat-demo . offset heat)/(demo . offset heat-scrll . offset heat)；//滚动条滚动事件scrll . onmousedown=function(event){//事件兼容性解决方案//console . log(demo . offsettop)varevent=event | | window . event；//获取鼠标按下的页面坐标//滚动条滚动时只有顶值变化，所以不需要获取pagex var pagey=event . pagey | | event . client document . document element . scroll top；//获取鼠标在scrll中的坐标var scrlly=pagey-demo . offset top-scrll . offset top；//绑定鼠标移动事件文档。onmousemove=function(event){ var event=event | | window . event；//获取鼠标移动时的坐标varmovey=event . pagey | | event . client document . document element . scroll top；//获取滚动条的移动坐标vartruey=movey-scracly-demo . offset top；//如果(trueY 0 ){ trueY=0，限制滚动条的移动范围；};if(true y demo . offset heat-scrll . offset heat){ true y=demo . offset heat-scrll . offset heat；};scrll . style . top=TrueY ' px '；//清除选中的文本窗口. getSelection？window.getSelection()。removeAllRanges(): document . selection . empty()；//获取文本区域的移动距离var dpY=trueY * biluDP . style . top=-DPy ' px '；} };//抬起鼠标清除鼠标移动事件document . onmouseup=function(){ document . onmousemove=null；} })(window)/script/html是本文的全部内容。希望这篇文章的内容能给大家的学习或者工作带来一些帮助，也希望大家多多支持我们！