隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）
生活随笔
收集整理的這篇文章主要介紹了
隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一種：使用純css樣式屬性隱藏滾動條 ?：火狐瀏覽器的css寫法不兼容
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>純css實現隱藏滾動條但鼠標可以滾動的效果</title><style>html,body {height: 100%;padding:0px;margin:0px;}.outContainer {width:350px;height:300px;border:2px solid orangered;overflow-x: hidden;overflow-y: scroll;}.inContent {height:150px;background-color:lightblue;}.inContent2 {background-color:purple;}/* 使用偽類選擇器 ::-webkit-scrollbar ,兼容chrome和safari瀏覽器 */.outContainer::-webkit-scrollbar { width:0 !important; /* remove scrollbar space */background: transparent; /* optional: just make scrollbar invisible */}/* 兼容IE10+ */.outContainer { -ms-overflow-style: none; }/* 但是firefox代碼無效 */.outContainer { overflow: -moz-scrollbars-none; }</style> </head> <body><div class="outContainer" ><div class="inContent" ></div><div class="inContent inContent2"></div><div class="inContent" ></div></div> </body> </html>?
第二種：使用盒子和定位將里層進度條隱藏，里層容器的width多17px，能兼容各個瀏覽器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html,body {height: 100%;padding:0px;margin:0px;}.outContainer {width:350px;height:300px;/* border:2px solid orangered; */overflow: hidden;position: relative;}.inContainer {overflow-x:hidden;overflow-y:scroll;position: absolute; /*不能使用relative和fixed定位*/top:0;bottom:0; /*相當于height:100%時的高度*/left: 0;right:-17px; /*圖層寬度大于width:100%,滾動條的寬度剛剛好被隱藏 */ }.inContent {height:150px;background-color:lightblue;}.inContent2 {background-color:purple;}</style></head> <body><div class="outContainer" ><div class="inContainer"><div class="inContent" ></div><div class="inContent inContent2"></div><div class="inContent" ></div></div></div></body> </html>?
第三種：使用滾動條插件，如niceScroll.js插件
niceScroll插件的下載和使用：https://mp.csdn.net/postedit/84781490
配置選項 autohidemode：“hidden”
$("#boxscroll").niceScroll({cursorcolor:"#00F",boxzoom:true,autohidemode:'hidden', //選項一直隱藏滾動條});?
總結
以上是生活随笔為你收集整理的隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2021顶级的开源 BI（商业智能）软件
- 下一篇： 整理学习：100多道前端面试题（一起加油