CSS中可以通過(guò)設(shè)置overflow-x
屬性來(lái)阻止元素在x軸方向的滾動(dòng)條,可以將overflow-x
屬性設(shè)置為hidden
或scroll
,其中hidden
表示隱藏滾動(dòng)條,而scroll
則表示顯示滾動(dòng)條但阻止其滾動(dòng)。
假設(shè)有一個(gè)div元素,其寬度超出其容器元素的寬度,那么可以通過(guò)以下CSS代碼來(lái)阻止其在x軸方向的滾動(dòng)條:
div { width: 200px; height: 100px; overflow-x: hidden; }
上述代碼將隱藏div元素在x軸方向的滾動(dòng)條,使其只能在其容器元素內(nèi)水平顯示。
如果需要在元素內(nèi)部阻止?jié)L動(dòng)條,但又希望保持其可滾動(dòng)的狀態(tài),那么可以將overflow-x
屬性設(shè)置為scroll
:
div { width: 200px; height: 100px; overflow-x: scroll; }
上述代碼將顯示div元素在x軸方向的滾動(dòng)條,但阻止其滾動(dòng),在這種情況下,用戶仍然可以通過(guò)拖動(dòng)滾動(dòng)條來(lái)查看元素內(nèi)部的內(nèi)容,但無(wú)法通過(guò)滾動(dòng)鼠標(biāo)滾輪或觸摸屏幕來(lái)移動(dòng)滾動(dòng)條。