CSS overflow 內容「溢出邊界」區塊層元素
在於網頁設計中指定 Html 區塊元素 Block Element 的內容超出了指定的邊界區塊層元素,該如何處理就需要用到 CSS 的 overflow 屬性,它可以控制 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>
使用 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>
雖然沒有背景色或邊框的情況下看來差不多,但是 Content-A~B 的內邊距 padding-left 就有些差異。
再某些位置計算的情況下或許有差異吧。
overflow 屬性值
設定如何處理元素框的顯示內容,主要有四個參數分別是 visible, hidden, scroll, auto 當元素框內容超出元素的矩框時要如何顯示,可以使用於區塊元素 block 與內聯元素 inline-block 如需要限制在某個範圍內避免影響版面配置時,就可以透過其設定讓圖片或文字區塊在固定的範圍內呈現,當超出範圍時自動變成捲軸呈現方式。
overflow 屬性 | 屬性值顯示內容 |
---|---|
visible | 內容不會被修剪,當超出元素的範圍時內容會呈現在元素框之外。 |
hidden | 內容會被修剪,但不會顯示捲軸,當超出元素的範圍時隱藏內容。 |
scroll | 內容會被修剪,當超出範圍時自動變成捲軸呈現方式。 |
auto | 自動選擇由瀏覽器決定如何顯示(預設值),當超出範圍時自動變成捲軸呈現方式。 |
overflow-x | 可設定「水平」方向,當超出範圍時自動變成捲軸呈現方式。(需要內有寬度大於元素框的物件) |
overflow-y | 可設定「垂直」方向,當超出範圍時自動變成捲軸呈現方式。 |
使用 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();
});