在網(wǎng)頁中,滾動條是我們經(jīng)常使用的組成部分,但有時我們希望頁面上不出現(xiàn)滾動條,這時我們可以使用CSS來隱藏滾動條。
隱藏水平滾動條的代碼:
body{ overflow-x: hidden; }
隱藏垂直滾動條的代碼:
body{ overflow-y: hidden; }
同時隱藏水平和垂直滾動條的代碼:
body{ overflow: hidden; }
如果我們希望保持頁面上其他元素的滾動條不受影響,可以使用::-webkit-scrollbar偽元素來定制滾動條樣式。
隱藏滾動條并定制滾動條樣式的代碼:
body{ overflow: hidden; } ::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { background-color: #000000; } ::-webkit-scrollbar-track { background-color: #F5F5F5; }
在上述代碼中,我們將滾動條的寬度設為8px,顏色為白色的背景,滑塊的顏色設為黑色,背景顏色設為白色。
在實際開發(fā)中,我們可以根據(jù)網(wǎng)頁的整體風格和需求來自由定制滾動條的樣式,進一步提升用戶體驗。
上一篇css往上查找父級