CSS overflow: clip 与 overflow-clip-margin:裁剪边界如何避免滚动容器
很多页面用 overflow: hidden 裁掉装饰元素,却意外得到可被脚本滚动的容器和滚动链。本文解释 overflow: clip 为何不创建滚动容器、overflow-clip-margin 如何扩展裁剪边界,并给出固定定位装饰场景下的取舍与支持边界。
共 3 篇文章
很多页面用 overflow: hidden 裁掉装饰元素,却意外得到可被脚本滚动的容器和滚动链。本文解释 overflow: clip 为何不创建滚动容器、overflow-clip-margin 如何扩展裁剪边界,并给出固定定位装饰场景下的取舍与支持边界。
固定宽度页面在内容变长时,经典滚动条会挤占可用宽度,导致整页内容横向跳动。本文解释 scrollbar-gutter 的 gutter 位置与 stable、both-edges 取值如何提前预留空间,说明 overlay 滚动条下该属性为何失效,并对比 padding 方案、给出诊断信号与适用边界。
本文解释浏览器布局的惰性机制,以及脚本在写入样式后立即读取布局属性如何触发强制同步布局(FSL),连续操作导致布局抖动。以长列表交互为例,给出批量读写、避免在循环中读取布局属性的实践,并说明如何通过 DevTools 检测。