CSS保健室｜overflow、overflow-x、overflow-y

前言

身為網頁設計忍者，學會風遁 overflow 術是必須的，能讓你面對不同敵人時，決定要現身、隱身還是影分身，在作戰時可是相當好用，查克拉儲備足夠了嗎？那就開始吧！

（ 圖片來源 ）

overflow 有下列屬性

屬性	說明	範例
visible （ 現身 ）	內容不會被修剪，當超出元素的範圍時內容會呈現在元素框之外。（ 圖片來源 ）
hidden （ 隱身 ）	內容會被修剪，但不會顯示捲軸，當超出元素的範圍時隱藏內容。（ 圖片來源 ）
scroll （ 影分身 ）	內容會被修剪，當超出範圍時自動變成捲軸呈現方式。（ 圖片來源 ）
auto	自動選擇由瀏覽器決定如何顯示（ 預設值 ），當超出範圍時自動變成捲軸呈現方式。

overflow-x

可設定「 水平 」方向，當超出範圍時自動變成捲軸呈現方式。

overflow-y

可設定「 垂直 」方向，當超出範圍時自動變成捲軸呈現方式。

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

PC 的捲軸不同於 MAC ，是一開始就會顯示的，若要先設定隱藏，滑鼠滑入後再出現捲軸，可以使用 jQuery 達成。

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $("匹配元素").on("mouseenter mouseleave", function (event) {
      if (event.type == "mouseenter") {
        $(this).css({"overflow-y": "scroll"});
      } else {
        $(this).scrollTop(0).css({"overflow-y": "hidden"});
      }
    });
</script>

參考資料

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