javascript - 滚动页面时更改元素的高度将元素移动到视口之外

Question

我们得到了一张卡片列表，其中显示了文本框的一小部分。该文本框的高度通过 CSS 受到限制。当用户单击“详细信息”时，文本框的高度通过 javascript 更改为内容的实际高度。问题是，当视口/窗口滚动并且卡片高度增加时，它会将自己推出视口。当窗口根本不滚动时，它可以工作。

请观看以下视频：https ://monosnap.com/file/HauaJrJlkx2MBLGt3QOa5ulJMxFTnv

0:00 -> 0:08 是我想要的打开/关闭行为

0:09 -> 0:16 是我不想要的行为，因为顶部文本已移出视口。

有没有办法保留视口，最好不用JS？

编辑：这只发生在 Chrome (84.0.41) 中，在 Firefox 和 Safari 中它按预期工作。

如有必要，我可以向您发送暂存环境的链接，请通过 [e-mail] 与我联系

标签： javascriptcssanimationscrollviewport

Answer 1

看起来它比你想要的更合乎逻辑。由于控件放置在底部元素（糟糕的 UI）中，因此最好将此控件保留在视口中（奇怪的是 Crome 的胸部这么认为）。

所以只要display:flex建立所有这些魔法:)

请查看示例 https://drive.google.com/file/d/1faTDwJBQEv-V96O8-HC-8R2_hXkGzsQJ/view?usp=sharing

更新：也请删除

tabindex="0" 

button而是使用div键盘导航来获得相同的逻辑。

On Video last Chrome Google Chrome 是最新版本 84.0.4147.89 (Official Build) (64-bit)