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

2024年4月24日 151次阅读 来源: 程然然然然然

《张鑫旭的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把宽度补给容器 – 效果演示

  • 自定义滚动条

  • 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与锚点技术

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

    原文作者：程然然然然然
    原文地址: https://segmentfault.com/a/1190000017320342
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞