如何在溢出滚动div内设置div水平居中？

问题描述 投票：0回答：1

这是我做的。 我想使用滚动事件使黄色 div 在溢出的 div 内水平居中。

但是正如你所看到的，它很口吃，表现得很奇怪。

移动网页浏览器比PC浏览器更糟糕。 （为什么？！！）

请给我一些帮助或小提示。非常感谢。

https://codesandbox.io/s/quizzical-grass-c45hrm?file=/src/App.js

html css dom
1个回答
0
投票

这可能不是最优雅的解决方案，但它比使用 JS 好很多：

<!DOCTYPE html>
<div style="position: relative; width: 100px; height: 100px; white-space: nowrap; border: solid">
  <div style="width: 100%; height: 100%; overflow: auto">
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
    <div style="position: absolute; background: aqua; text-align: center; inset: 50% 0 auto; margin-top: -0.5lh">test</div>
  </div>
</div>


position: relative
外部元素将 
position: absolute
元素捕获在滚动框之外，因此它位于滚动框上方而不是内部，并且可以在内容滚动时使其保持静止。

JS 解决方案卡顿是因为它本身没有与滚动代码同步运行。一般来说，CSS 中的声明式方法在滚动和动画方面比 JS 更快，因为浏览器引擎不需要循环遍历整个样式和布局处理模型，并且可以以一种不可能的方式优化和硬件加速布局在 JS 中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.