[CSS]關閉瀏覽器橫向/縱向捲軸方法

通常不太會需要使用到把瀏覽器或文本的卷軸,但特殊情況下會需要整個版面進行固定,

但固定之後,明明沒有超出寬度或高度,硬是跑出這個礙眼的捲軸,造成整個頁面的美感破壞。

這時候就可以關閉卷軸來強制畫面整體性。

可以使用:

overflow-y:控制直向捲軸顯示方式
overflow-x: 控制橫向捲軸顯示方式

顯示方式的控制有以下三種,只需依照需求將控制的代碼放到上方冒號後面即可。

hidden:表示強制隱藏、scroll:讓卷軸顯示 、auto:依實際情況自動調整是否顯示
不論是橫向或直向卷軸,一次只能設定一種顯示方式,顯示方式後方須加上分號;。

 

範例一:

針對指定項目進行設定

<textarea rows="12" name="TxtMemo" cols="20" style="overflow-y: scroll; overflow-x: hidden;"></textarea>

上面的例子是將文字輸入區橫向卷軸隱藏,直向卷軸顯示。

 

範例二:

body {
overflow-y: scroll;
overflow-x: hidden;
}

上面的例子是透過將代碼放入CSS Style中,將整個網頁的橫向卷軸隱藏,直向卷軸顯示。

只需簡單的幾個文字就可以達成理想效果。

分享出去: