//html代码<div class="layui-panel" id="box" style=" height: 100%; width: 100%; position: relative; /*超出隐藏*/ overflow: hidden; " ><ul class="layui-menu" id="content" style=" height: 170px;width: 94%;overflow: hidden;float: left; "><li lay-options="{id:100}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >11</div></li><li lay-options="{id: 101}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; ">22</div></li><li lay-options="{id: 102}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >33</div></li><li lay-options="{id: 103}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >44</div></li><li lay-options="{id: 104}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >55</div></li><li lay-options="{id: 105}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >66</div></li><li lay-options="{id: 105}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >77</div></li><li lay-options="{id: 105}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >88</div></li><li lay-options="{id: 105}"><div class="layui-menu-body-title" style=" width: 294px; vertical-align: top; height: 30px; text-align: left; line-height: 30px; " >99</div></li></ul><div id="scroll" style=" float: left;height: 170px;width: 10px; background-color:grey;border-radius:10px; "> <div id="scrollTrack" style=" background-color: white;border-radius:10px;width:8px;margin-left:1px; "> </div> </div> </div>//js代码layui.use('dropdown', function(){var dropdown = layui.dropdown;//菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指dropdown.on('click(docDemoMenu1)', function(options){var othis = $(this); //当前菜单列表的 DOM 对象// console.log(othis,"othis11111")// console.log(othis.context.innerText,"othisothis22222"); // console.log(options,"options1313"); //菜单列表的 lay-options 中的参数// console.log(options,"options")});});var content = document.getElementById('content')var scroll = document.getElementById('scroll')var scrollTrack = document.getElementById('scrollTrack')//判断是否需要滚动条 if(content.clientHeight < content.scrollHeight ){//滚动条的高度 / 轨道高度 = 盒子高度 / 内容高度scrollTrack.style.height = content.clientHeight/content.scrollHeight*scroll.offsetHeight + 'px'}//拖动事件scrollTrack.onmousedown = function(e){// // 处理双滚动条冲突 // 滚动条消失var mo=function(e){e.preventDefault();};document.body.style.overflow='hidden';document.addEventListener("touchmove",mo,false);//禁止页面滑动//鼠标滚动条中的高度 = 鼠标的Y轴坐标 - 滚动条距离Body的高度var mouseY = e.pageY - scrollTrack.offsetTop //滚动条在轨道中的偏移距离 = 鼠标的Y轴坐标 - 轨道距离body的高度 - 鼠标在滚动条中的高度var Y = e.pageY - scroll.offsetTop -mouseY//滚动条的最大滚动距离 = 轨道高度 - 滚动条高度 var maxY = scroll.offsetHeight - scrollTrack.offsetHeight;document.onmousemove = function(e){Y = e.pageY - scroll.offsetTop -mouseYif(Y < 0){Y = 0}if(Y > maxY){Y = maxY}//设置滚动条在轨道中的距离上方的距离 scrollTrack.style.marginTop = Y +'px'//内容的滚动距离 = 滚动条的滚动距离 / 最大滚动距离 * 内容最大滚动距离content.scrollTop = Y/maxY*(content.scrollHeight - content.offsetHeight)} }//滚轮事件scroll.onmouseenter = function(e){//滚动条的滚动距离 = 鼠标的Y轴坐标 - 滚动条距离Body的高度// // 处理双滚动条冲突 // 滚动条消失var mo=function(e){e.preventDefault();};document.body.style.overflow='hidden';document.addEventListener("touchmove",mo,false);//禁止页面滑动var Y = e.pageY - scroll.offsetTop//滚动条的最大滚动距离 = 轨道高度 - 滚动条高度 var maxY = scroll.offsetHeight - scrollTrack.offsetHeight;document.onmousewheel = function(e){// 内容的滚动距离 = 内容本来滚动的距离 + 滚轴相对滚动的距离content.scrollTop = content.scrollTop - e.wheelDelta// 滚轮滚动距离 = 内容滚动距离 /内容最大滚动距离 * 滚动条最大滚动距离//-2 是为了防止滚动条溢出轨道scrollTrack.style.marginTop = (content.scrollTop ) / ( content.scrollHeight - content.offsetHeight) * ( maxY-2) +'px'} }// 处理双滚动条冲突box.onmouseleave = function(){// /***取消滑动限制***/var mo=function(e){e.preventDefault();};document.body.style.overflow='';//出现滚动条document.removeEventListener("touchmove",mo,false);}document.onmouseup = function(){document.onmousemove = null;}scroll.onmouseleave = function(){document.onmousewheel = null;}
如果觉得《js实现滚动条（鼠标滚轮+鼠标拖动）》对你有帮助，请点赞、收藏，并留下你的观点哦！
