滚动条滚动时显示,不滚动时隐藏
像滚动条的控制样式我们基本知道,看下:
::-webkit-scrollbar // 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar // 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button // 滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece // 内层滚动槽
::-webkit-scrollbar-thumb // 滚动的滑块
::-webkit-scrollbar-corner // 边角
::-webkit-resizer // 定义右下角拖动块的样式
针对不同的浏览器,有不同的隐藏滚动条的方法,以下针对三大浏览器 chrome、ie(包括 edge)、firefox 分别叙述之:
Chorme
body::-webkit-scrollbar {
display: none;
}
IE/Edge
body {
-ms-overflow-style: none;
}
Firefox
firefox 是三者之中最麻烦的:
html {
/*注意!若只打 hidden,chrome 的其它 hidden 会出问题*/
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body {
height: 100%;
/*浏览器滚动条的长度大约是 18px*/
width: calc(100vw + 18px);
overflow: auto;
}
到此还没结束,你还要在一些地方加上width: 100vw;
。
假设你的HTML
长这样:
<body> <div id="example-1"> <p>山有木兮木有枝,心悦君兮君不知。</p> </div> <article id="example-2"> <h1>只愿君心似我心,定不负相思意!</h1> <p>入我相思门,知我相思苦</p> <button>古诗词</button> </article> </body>
那你的CSS就还要再加上:
#example-1 {
width: 100vw;
}
#example-2 {
width: 100vw;
}
总结下来
html {
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
height: 100%;
width: calc(100vw + 18px);
overflow: auto;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滚动条滑动显示不滑动隐藏</title> <style> * { margin: 0; padding: 0; } html { overflow: -moz-hidden-unscrollable; height: 100%; } body::-webkit-scrollbar{ width: 0px; } body { -ms-overflow-style: none; height: 100%; width: calc(100vw + 18px); overflow: auto; } #box::-webkit-scrollbar { width: 6px; height: 6px } #box::-webkit-scrollbar-thumb { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #666; } #box::-webkit-scrollbar-track { background-color: #eee; } #box { width: calc(100vw - 0px); height: 100%; overflow-y: scroll; } .small { height: 3000px; } </style> </head> <body> <div id="box"> <div class="small"></div> </div> <script> let roll = 0; // 滚动的值 let stop = 0; // 对比时间的值 let timer = null; document.getElementById('box').addEventListener('scroll', function(){ var e = event || event.target; // console.log(e.srcElement.scrollTop) // 每次滑动前都清除一遍我们定义的定时器 clearTimeout(timer); // 每次滚动的时候,都让box回到原来的宽度 document.getElementById('box').style.width = 'calc(100vw - 0px)'; // 这里我设置的是300毫秒,您可以更改您想要的间隔秒数 timer = setTimeout("JudgeScroll()", 300); roll = e.srcElement.scrollTop; }) function JudgeScroll() { // console.log(roll,stop) stop = document.getElementById('box').scrollTop; if(stop == roll) { // console.log('滚动停止'); // 判断如果相等,就把box宽度增加18px,达到隐藏滚动条的效果 document.getElementById('box').style.width = 'calc(100vw + 18px)'; } } </script> </body> </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」