CSS 樣式CSS overflow「溢出邊界範圍」捲軸呈現方式

CSS overflow 內容「溢出邊界」區塊層元素

例如區塊中使用了 float:left 若是沒有背景色或邊框,可能沒發現區塊實際的位置

<div style="float: left">float:Left</div>
<div>Content-A</div>
<div>Content-B</div>
<div>Content-C</div>
float: Left
Content-A
Content-B
Content-C

使用 overflow: hidden 的情況

<div style="float: left">float:Left</div>
<div style="overflow: hidden">Content-A</div>
<div style="overflow: hidden">Content-B</div>
<div style="overflow: hidden">Content-C</div>
float: Left
Content-A
Content-B
Content-C

雖然沒有背景色或邊框的情況下看來差不多,但是 Content-A~B 的內邊距 padding-left 就有些差異。
再某些位置計算的情況下或許有差異吧。


overflow 屬性值

設定如何處理元素框的顯示內容,主要有四個參數分別是 visible, hidden, scroll, auto 當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素 block 與內聯元素 inline-block 如需要限制在某個範圍內避免影響版面配置時,就可以透過其設定讓圖片或文字區塊在固定的範圍內呈現,當超出範圍時自動變成捲軸呈現方式。

overflow 屬性 屬性值顯示內容
visible 內容不會被修剪,當超出元素的範圍時內容會呈現在元素框之外。
hidden 內容會被修剪,但不會顯示捲軸,當超出元素的範圍時隱藏內容。
scroll 內容會被修剪,當超出範圍時自動變成捲軸呈現方式。
auto 自動選擇由瀏覽器決定如何顯示(預設值),當超出範圍時自動變成捲軸呈現方式。
overflow-x 可設定「水平」方向,當超出範圍時自動變成捲軸呈現方式。(需要內有寬度大於元素框的物件)
overflow-y 可設定「垂直」方向,當超出範圍時自動變成捲軸呈現方式。
visible設定如何處理元素框的顯示內容,主要有四個參數當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素與內聯元素,自動顯示捲軸如需要限制在某個範圍內避免影響版面配置,或是內容當超出範圍時自動變成捲軸呈現方式。
hidden設定如何處理元素框的顯示內容,主要有四個參數當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素與內聯元素,自動顯示捲軸如需要限制在某個範圍內避免影響版面配置,或是內容當超出範圍時自動變成捲軸呈現方式。
scroll設定如何處理元素框的顯示內容,主要有四個參數當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素與內聯元素,自動顯示捲軸如需要限制在某個範圍內避免影響版面配置,或是內容當超出範圍時自動變成捲軸呈現方式。
overflow-x設定如何處理元素框的顯示內容,主要有四個參數當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素與內聯元素,自動顯示捲軸如需要限制在某個範圍內避免影響版面配置,或是內容當超出範圍時自動變成捲軸呈現方式。
overflow-y設定如何處理元素框的顯示內容,主要有四個參數當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素與內聯元素,自動顯示捲軸如需要限制在某個範圍內避免影響版面配置,或是內容當超出範圍時自動變成捲軸呈現方式。
jQuery使用 jQuery 設定如何處理元素框的顯示內容,主要有四個參數當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素與內聯元素,自動顯示捲軸如需要限制在某個範圍內避免影響版面配置,或是內容當超出範圍時自動變成捲軸呈現方式。

jQuery Scroll 對元素捲軸的偏移及顯示設定

$("匹配元素").on("mouseenter mouseleave", function (event) { //挷定滑鼠進入及離開事件
  if (event.type == "mouseenter") {
    $(this).css({"overflow-y": "scroll"}); //滑鼠進入
  } else {
    $(this).scrollTop(0).css({"overflow-y": "hidden"}); //滑鼠離開
  }
});

Modification in