有的時(shí)候總是會(huì)碰到稀奇古怪的需求接箫，像現(xiàn)在就有一個(gè)判斷條滾動(dòng)時(shí)顯示攒读，不滾動(dòng)時(shí)隱藏的。按照一般的滾動(dòng)條顯示隱藏需求辛友，基本上是用css的hover屬性薄扁，hover的時(shí)候顯示滾動(dòng)條，否則隱藏废累。
如需直接看demo的朋友請(qǐng)直接滑到最后邓梅，上面與中間部分是介紹css與JavaScript對(duì)滾動(dòng)條的控制。
像滾動(dòng)條的控制樣式我們基本知道邑滨，看下
::-webkit-scrollbar // 滾動(dòng)條整體部分日缨，可以設(shè)置寬度啥的
::-webkit-scrollbar // 滾動(dòng)條整體部分，可以設(shè)置寬度啥的
::-webkit-scrollbar-button // 滾動(dòng)條兩端的按鈕
::-webkit-scrollbar-track // 外層軌道
::-webkit-scrollbar-track-piece // 內(nèi)層滾動(dòng)槽
::-webkit-scrollbar-thumb // 滾動(dòng)的滑塊
::-webkit-scrollbar-corner // 邊角
::-webkit-resizer // 定義右下角拖動(dòng)塊的樣式
在這里呢掖看，我參考了掘金大佬的一篇文章匣距，給大家附上鏈接，作者：Yeefun
鏈接：https://juejin.im/post/6844903552217792520
針對(duì)不同的瀏覽器乙各，有不同的隱藏滾動(dòng)條的方法墨礁，以下針對(duì)三大瀏覽器 chrome幢竹、ie（包括 edge）耳峦、firefox 分別敘述之：
Chorme
body::-webkit-scrollbar {
display: none;
}
IE/Edge
body {
-ms-overflow-style: none;
}
Firefox
firefox 是三者之中最麻煩的：
html {
/*注意！若只打 hidden焕毫，chrome 的其它 hidden 會(huì)出問(wèn)題*/
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body {
height: 100%;
/*瀏覽器滾動(dòng)條的長(zhǎng)度大約是 18px*/
width: calc(100vw + 18px);
overflow: auto;
}
到此還沒(méi)結(jié)束蹲坷，你還要在一些地方加上width: 100vw;。
假設(shè)你的HTML長(zhǎng)這樣：
<body>
<div id="example-1">
<p>山有木兮木有枝邑飒，心悅君兮君不知循签。</p>
</div>
<article id="example-2">
<h1>只愿君心似我心，定不負(fù)相思意疙咸！</h1>
<p>入我相思門(mén)县匠，知我相思苦</p>
<button>古詩(shī)詞</button>
</article>
</body>
那你的CSS就還要再加上：
#example-1 {
width: 100vw;
}
#example-2 {
width: 100vw;
}
總結(jié)下來(lái)
綜上所述，如果你想讓三大瀏覽器的滾動(dòng)條都隱藏撒轮，并且可以捲動(dòng)乞旦，那你的CSS就至少要長(zhǎng)這樣：
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;
}
至于width: 100vw;要加在何處，就要看你的HTML結(jié)構(gòu)長(zhǎng)怎樣了题山。
優(yōu)點(diǎn)
可以讓讀者更聚焦于內(nèi)文兰粉，而不會(huì)看到滾動(dòng)條很短就懶得看、跳出網(wǎng)頁(yè)顶瞳，或一心急玖姑，就把滾動(dòng)條直直往下拉愕秫。換言之，就是強(qiáng)迫讀者慢慢地把內(nèi)容看完焰络。
缺點(diǎn)
假如讀者想往回看戴甩，可能就會(huì)要滾很久。所以舔琅，如果你想為較長(zhǎng)的內(nèi)文隱藏滾動(dòng)條等恐，建議應(yīng)有導(dǎo)覽列，讓讀者可以快速跳到某一處备蚓。
上文出處附注：
標(biāo)題：如何把滾動(dòng)條隱藏课蔬，
作者：Yeefun點(diǎn)擊可跳轉(zhuǎn)鏈接，
鏈接：https://juejin.im/post/6844903552217792520
好了郊尝，現(xiàn)在我們知道滾動(dòng)條隱藏了二跋，后面就有滑動(dòng)時(shí)顯示滾動(dòng)條，滾動(dòng)條沒(méi)有滑動(dòng)時(shí)隱藏流昏，獲取滾動(dòng)條一般是寫(xiě)
document.getElementById('xxx').onscroll = function() {
// console.log()
}
但是我們這里用EventTarget.addEventListener() 扎即；同時(shí)也用到了css的calc計(jì)算屬性，關(guān)于EventTarget.addEventListener()况凉，不了解的童鞋可以仔細(xì)看看谚鄙，如果已經(jīng)知道的童鞋可以直接略過(guò)
addeventListener()方法介紹
方法將指定的監(jiān)聽(tīng)器注冊(cè)到EventTarget上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)刁绒，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行闷营。 事件目標(biāo)可以是一個(gè)文檔上的元素Element,Doument和Window或者任何其他支持事件的對(duì)象（比如XMLHttpRequest）
原理
addEventListener()的工作原理是將實(shí)現(xiàn)EventListener的函數(shù)或?qū)ο筇砑拥秸{(diào)用它的EventTarget上的指定事件類型的時(shí)間偵聽(tīng)器列表中。
addEventListener()語(yǔ)法
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted); // Gecko/Mozilla only
好了知市，廢話不多說(shuō)傻盟，直接上代碼，這個(gè)是寫(xiě)的一個(gè)小demo嫂丙，感興趣的童鞋可以直接copy下來(lái)到瀏覽器運(yùn)行娘赴。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滾動(dòng)條滑動(dòng)顯示不滑動(dòng)隱藏</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; // 滾動(dòng)的值
let stop = 0; // 對(duì)比時(shí)間的值
let timer = null;
document.getElementById('box').addEventListener('scroll', function(){
var e = event || event.target;
// console.log(e.srcElement.scrollTop)
// 每次滑動(dòng)前都清除一遍我們定義的定時(shí)器
clearTimeout(timer);
// 每次滾動(dòng)的時(shí)候，都讓box回到原來(lái)的寬度
document.getElementById('box').style.width = 'calc(100vw - 0px)';
// 這里我設(shè)置的是300毫秒跟啤，您可以更改您想要的間隔秒數(shù)
timer = setTimeout("JudgeScroll()", 300);
roll = e.srcElement.scrollTop;
})
function JudgeScroll() {
// console.log(roll,stop)
stop = document.getElementById('box').scrollTop;
if(stop == roll) {
// console.log('滾動(dòng)停止');
// 判斷如果相等诽表，就把box寬度增加18px，達(dá)到隱藏滾動(dòng)條的效果
document.getElementById('box').style.width = 'calc(100vw + 18px)';
}
}
</script>
</body>
</html>
在這里呢我是直接把
body的滾動(dòng)條隱藏了隅肥，width: 0px;然后再自己寫(xiě)了個(gè)id為box的div竿奏，這個(gè)box為自定義滾動(dòng)條，像上面我也給它自定義了一些樣式武福，class為small的div议双，就是我們的內(nèi)容啦。在JavaScript的代碼里捉片，我們定義了一個(gè)滾動(dòng)的值平痰，一個(gè)是和時(shí)間對(duì)比的值汞舱，主要的話就是一個(gè)定時(shí)器，每隔300毫秒就校驗(yàn)一次宗雇，滾動(dòng)條與上次滾動(dòng)的是否相等昂芜，如果相等，那么就說(shuō)明滾動(dòng)條是靜止的赔蒲，不相等說(shuō)明就是滾動(dòng)條正在滾動(dòng)當(dāng)中泌神。所以這里用了css的計(jì)算屬性calc()，當(dāng)滾動(dòng)條靜止舞虱，那么這個(gè)box的width就增加18px欢际，不靜止就回到原來(lái)的位置。
好了矾兜，這篇文章到這里就要結(jié)束了损趋，如果您正在看這篇文章，覺(jué)得對(duì)您有幫助的話椅寺，就麻煩您的小手手給我點(diǎn)個(gè)贊吧^ _ ^浑槽，如果有任何疑惑或建議，都可在下方留言返帕，一起交流桐玻、學(xué)習(xí)。
