【学习笔记】CSS深入理解之overflow

overflow基本属性

overflow属性介绍

overflow: visible(默认)|hidden|scroll|auto|inherit

当overflow-x 与 overflow-y值相同时，等同于overflow

当overflow-x 与 overflow-y值不相同时，其中一个值被赋予hidden|auto|scroll时，若另一个值为visible，
那这个visvible会被重置为auto

https://codepen.io/curlywater...

overflow作用前提

元素非 display: inline
对应方位的尺寸限制: width/height/max-width/max-height/absolute拉伸
对于单元格等, 需要 table 为 table-layout: fixed 状态才可以

overflow与滚动条

• 页面默认滚动条来自html（与body无关），因此若要去除默认滚动条，只需要

  html {
      overflow: hidden;
  }

• 获取滚动高度

  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  /* chrome浏览器：document.body.scrollTop */
  /* 其他浏览器：document.documentElement.scrollTop*/

• 内部padding-bottom缺失

  除Chrome之外的其他浏览器会有padding-bottom缺失效果，将导致scrollHeight值不一致

• 滚动条宽度机制

  1. 滚动条会占用容器的可用宽度|高度
  2. 计算滚动条宽度：containerWidth - boxWidth
  3. 因宽度占用，overflow: auto可能会造成容器内部局部混乱，因此容器内部需使用自适应布局

  4. 水平居中跳动问题，容器定宽居中时，当视口高度变化导致滚动条出现将导致容器跳动。

     解决方法：

     1. 针对IE9以下浏览器，强制设置html滚动
     2. 其他浏览器，利用calc函数计算滚动条宽度（浏览器宽度 - 可用内容区宽度），通过padding把宽度补给容器 - 效果演示

• 自定义滚动条

  • webkit自定义滚动条，详细解读

  • 自定义滚动条插件

    • malihu-custom-scrollbar-plugin - 支持IE8+，扩展性极佳
    • antiscroll - cross-browser native OS X Lion scrollbars

• iOS原生滚动回调

  -webkit-overflow-scrolling: touch;

overflow与BFC

overflow: visible不会产生BFC

overflow: hidden|scroll|auto 产生BFC，但是具有溢出不可见的副作用

overflow与绝对定位

overflow失效：绝对定位元素不总是被overflow元素剪裁/随滚动条滚动，尤其当overflow元素处于绝对定位元素和其包含块中间时

避免失效的方法：

1. overflow元素自身为包含块
2. overflow元素的子元素为包含块
3. overflow元素的子元素有transform声明

依赖overflow的样式表现

1. 在overflow为visible时，resize属性将会失效
2. text-overflow: ellipsis以overflow: hidden为前提

overflow与锚点技术

锚点技术的实质时容器改变滚动高度