我正在嘗試以一種方式編寫 HTML/CSS，我有一個可以垂直和水平滾動的 div，但只有水平滾動條可見。因此，垂直滾動是使用鼠標滾輪完成的，水平滾動是使用底部的滾動條（以及其他常用控件，如鍵盤等）完成的。通常建議使用 -webkit-scrollbar display none 的解決方案在這里不適用，因為它只能隱藏兩個滾動條，因此出現(xiàn)了新問題。所以，基本上，我需要這樣的行為，除了水平滾動條應該仍然存在：.content { width:400px; height:200px;}.container { overflow-x: auto; overflow-y: auto; height: 100px; width: 200px;}.container::-webkit-scrollbar { display: none;}<div class="container"> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
1 回答
HUX布斯
TA貢獻1876條經(jīng)驗 獲得超6個贊
您可以使用-webkit-scrollbar，但需要使用width和height而不是display: none
div {
width: 100px;
height: 100px;
font-size: 48px;
overflow: auto;
}
::-webkit-scrollbar {
height: 0px;
width: 8px;
border: 1px solid #fff;
}
::-webkit-scrollbar-track {
border-radius: 0;
background: #eeeeee;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background: #b0b0b0;
}
<div>
Lorem ipsum dolor sit amet.
</div>
Shift scroll to move horizontally
width 僅影響垂直滾動，而 height 僅影響水平滾動。如果您設置height: 0px，它將隱藏水平滾動條，但保留垂直滾動條。
- 1 回答
- 0 關注
- 252 瀏覽
添加回答
舉報
0/150
提交
取消