HTMl - 橫向滾動實現

橫向滾動

雖然大多數網頁都是垂直滾動的，但對於以頁顯示地網站來說，橫向滾動翻頁(就像word的閱讀視圖那樣)往往也是個不錯的選擇。如下爲幾種橫向滾動的實現方式，不論哪種方式中，overflow-y: hidden都是必須的，該屬性會禁用豎直方向的溢出。筆者才疏學淺，如有問題還望評論指正。

使用flex容器

flex容器詳細使用可以參考阮一峯老師的flex教程。實際實現時，設置頂層容器爲flex容器，方向爲橫向。然後對每個子元素設置其最小寬度即可。代碼及效果圖如下，其中.container爲最頂層容器:

.container {
    font-size: 14px;
    width: 700px;
    height: 500px;
    margin: 15px;
    background-color: whitesmoke;
    box-shadow: gray 1px 1px 8px;
    overflow-y: hidden;
    overflow-x: hidden;
}
#targetDiv2{
    display: flex;
    background-color: wheat;
    flex-direction: row;
    height: 95%;
    padding: 5px;
    overflow-y: hidden;
    column-count: 1;
}
p { min-width: 200px; }

雖然flex容器實現了橫向滾動，但他要求容器內子元素的寬度固定，否則容器會按照flex的規則排列鋪滿整個屏幕，而不是溢出到容器外。

使用column

在禁用豎直滾動後，若div元素的column-count屬性值大於0，則會自動橫向排列所有元素，並且元素的寬度會按照指定的值分割容器寬度。如下爲代碼及效果:

.container {
    font-size: 14px;
    width: 700px;
    height: 500px;
    margin: 15px;
    background-color: whitesmoke;
    box-shadow: gray 1px 1px 8px;
    overflow-y: hidden;
    overflow-x: hidden;
}
#targetDiv {
    margin: 5px;
    overflow-y: hidden;
    height: 95%;
    background-color: wheat;
    column-count: 1;
}
p { min-width: 200px; }

總結

CSS屬性繁多複雜，而且不同瀏覽器有差異，想要嘗試的話可以多看看其它網站的樣式。F12查看元素，更改一下體會更深。

P.S. text-align屬性中,justify值能夠使段落內容兩邊對齊
P.P.S. text-align-last屬性能夠設置段落的最後一行的對齊方式，默認值爲auto