记录overflow：hidden和scrollIntoView导致的页面问题

问题描述：

在一个编辑器中开发页面组件，组件内部对子元素设置了position:absolute定位，并且元素内容区域设置了overflow:hidden属性。

启动项目后，可以在编辑器中可以对该组件进行相关设置和修改。当切换选中内容时，页面会自动滚动，将选中组件显示到浏览器视口中，修改对应属性也会重新渲染对应组件。

第一次渲染时UI展示正常。但是当对该组件切换选中元素或者对设置了定位的子元素设置新属性时都会导致下图中子元素的定位异常。但是在调试面板中查询该元素属性值，也没有任何改变。尝试重新在控制面板中赋值对应的top值，模型又会显示到指定位置。

解决过程

尝试使用内容监听器在组件被选中后，重新赋值对应的top和left值无法解决此问题。

后来通过浏览器断点调试，发现在触发监听器之前，该组件执行了scrollIntoView方法，见下图

相关分析：

在执行ScrollIntoView期间会多次重绘【reflow/repaint】页面布局。而子元素中定位相关属性值会在重绘时基于父元素的当前视口上下文重新计算，导致位置偏移，比如上图中的子元素底部与父元素对齐现象。

而这里遇到的问题就是在组件相关容器中设置了overflow:hidden。

解决：

将overflow:hidden改成overflow:clip就解决此问题了。

解析overflow:hidden和overflow:clip

overflow: hidden：
- 隐藏超出元素边界的内容，但内容在内部仍然"存在"。
- 不显示滚动条，但可以通过JavaScript（如 element.scrollLeft）或嵌套滚动访问隐藏内容。
- 这是较早的标准值，广泛支持所有现代浏览器。

overflow: clip：
- 完全"剪切"超出边界的内容，就好像超出部分不存在一样。
- 不允许任何形式的滚动访问（即使通过JS），内容被彻底丢弃。
- 这是CSS Overflow Module Level 3 中的新值（引入于 2020 年左右），浏览器支持较新（Chrome 90+、Firefox 75+、Safari 15+）。在旧浏览器中可能回退到 hidden。

2. 关键区别

方面	overflow: hidden	overflow: clip
内容可见性	隐藏超出部分，但内容仍可通过`JS` 滚动访问。	完全剪切超出部分，无法通过任何方式访问。
滚动行为	创建一个隐形的滚动容器；滚动事件可冒泡到父元素。	不创建滚动容器；滚动事件直接传递给父元素，不被捕获。
性能影响	可能导致浏览器计算隐藏内容的布局和渲染（较低性能）。	优化性能：浏览器忽略超出内容的渲染和布局（更快，尤其在复杂页面）。
定位/粘性影响	支持 `position: sticky` 等行为；创建新的块格式化上下文 (`BFC`)。	不支持 `position: sticky`（元素不会粘性）；不创建 `BFC`。
JS 交互	可以用`JS` 修改滚动位置（如 `scrollTo()`）。	无法用 `JS` 滚动；超出内容被视为不存在。
浏览器支持	所有现代浏览器（`IE6+`）。	较新浏览器；需检查兼容性（`polyfill` 有限）。
用例	适合需要隐藏但可能内部滚动的场景（如裁剪图片但允许`JS`动画）。	适合纯静态剪切场景（如性能敏感的游戏/`UI`），或防止意外滚动。

核心差异总结：hidden 是"隐藏但可访问"的（像盖了个盖子），而 clip 是"彻底删除超出部分"的（像用剪刀剪掉）。clip 更严格，旨在提高性能，但牺牲了一些灵活性。