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 如需要限制在某个范围内避免影响版面配置时，就可以透过其设定让图片或文字区块在固定的范围内呈现，当超出范围时自动变成捲轴呈现方式。

使用 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();
});