如何用CSS設(shè)置滾動(dòng)屬性

在CSS中，我們可以使用overflow屬性來設(shè)置元素的滾動(dòng)屬性。overflow屬性可以設(shè)置為visible、hidden、scroll和auto四個(gè)值。

visible默認(rèn)值，內(nèi)容不會(huì)被裁剪，會(huì)呈現(xiàn)在元素框之外。

hidden內(nèi)容會(huì)被裁剪，不會(huì)出現(xiàn)在元素框之外。

scroll內(nèi)容會(huì)被裁剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容。

auto與scroll類似，但是瀏覽器會(huì)自動(dòng)判斷是否需要顯示滾動(dòng)條。

我們還可以使用overflow-x和overflow-y屬性來分別設(shè)置元素的水平和垂直滾動(dòng)屬性，這些屬性的值也與overflow屬性相同。

如果我們想要一個(gè)元素只有垂直滾動(dòng)條，那么可以將其overflow-x屬性設(shè)置為hidden，將其overflow-y屬性設(shè)置為scroll或auto。

需要注意的是，如果元素的寬度或高度大于其包含的內(nèi)容的寬度或高度，那么即使設(shè)置了overflow屬性為hidden，瀏覽器也會(huì)顯示滾動(dòng)條，在設(shè)置元素的寬度或高度時(shí)，需要考慮到這一點(diǎn)。

如果元素的內(nèi)容超出了其包含元素的寬度或高度，那么瀏覽器會(huì)根據(jù)設(shè)置的overflow屬性來決定如何處理這些內(nèi)容，如果設(shè)置為visible會(huì)溢出到元素框之外；如果設(shè)置為hidden會(huì)被裁剪；如果設(shè)置為scroll或auto，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容。