div定義的寬度 = 内容寬度+滾動條寬度。出現滾動條會導緻内容偏移,想讓滾動條不占寬度該如何設定,下面我們來看一下css設定滾動條不占寬度的方法。

定義一個标簽,标簽的寬度為内容寬度加上滾動條寬度,可以設定滾動條的寬度為0,這樣滾動條就可以不出現。.mask::-webkit-scrollbar{
width:0;
}
你可以使用以下僞元素選擇器去修改各式webkit浏覽器的滾動條樣式:::-webkit-scrollbar — 整個滾動條.
::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
::-webkit-scrollbar-track — 滾動條軌道.
::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
::-webkit-scrollbar-corner — 當同時有垂直滾動條和水準滾動條時交彙的部分.
::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).
文法:::-webkit-scrollbar { styles here }
示例:.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa;
}
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
}