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

在於網頁設計中指定 Html 區塊元素 Block Element 的內容超出了指定的邊界區塊層元素,該如何處理就需要用到 CSSoverflow 屬性,它可以控制 Html 元素的內容溢出的行為,例如是否要顯示 scroll 捲軸、是否要裁剪內容等,以下是介紹 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 對元素捲軸的偏移及顯示設定

使用 jQuery Scroll 元素捲軸是指使用 jQuery 來控制或偵測網頁可滾動元素的捲軸位置。捲軸位置是指元素的內容超出元素的邊界時,可以用滑鼠或鍵盤來移動的區域。網頁中捲軸位置可以用 .scrollTop() 或 .scrollLeft() 方法來取得或設定,分別代表捲軸的上側或左側的位置,擷取網頁元素的捲軸高度、取得網頁元素 body 捲動高度的區域,或是指定網頁中捲軸位置。

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    console.log("Scroll to Position");
  }
});

mouseenter 滑鼠進入元素範圍時處理的程式,類似於 mouseover。

mouseleave 滑鼠離開元素範圍時處理的程式,類似於 mouseout。

scroll 當網頁中捲軸捲動時處理的程式,依據捲軸捲動位置來處理綁定的事件。

focus 當網頁或元素取得焦點時處理的程式。

blur 當網頁或元素失去焦點時處理的程式。

unload 當網頁離開網頁時處理的程式,一般用於如填寫了資訊尚未提交 submit 的提示。

resize 當網頁大小改變時處理的程式、當版面「瀏覽器大小」改變時做出符合的方案。

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

jQuery Event 事件型態處理程式

「匹配元素」指定的 DOM 元素。jQuery 事件是指在網頁元素中發生的動作可以使用 jQuery 的事件監聽方法來綁定事件觸發處理函式 jQuery.Event() 提供常見的事件處理方法更簡單處理事件函式。


window.resize 觸發 Delay 延遲時間

$(function () {
  let delayTimer, w, div = $("div.square-container");

  let Handler = function () {
    w = div.width() / 2;
    div.css({ height: w });
  };

  $(window).on("resize", function () {
    delayTimer && window.clearTimeout(delayTimer);
    delayTimer = window.setTimeout(function () {
      Handler();
    }, 400)
  });

  Handler();
});