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

《张鑫旭的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与锚点技术

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