css - 位置:选择选项时粘性跳跃

Question

我正在尝试使用 css 样式，position: sticky。除了当 select 元素变为事件状态时，它工作得很好。页面滚动回粘性元素的位置。

<div style="position: sticky; position: -webkit-sticky; top: 0;">
    <select>
        <option>Option</option>
    </select>
</div>

https://codepen.io/anon/pen/vrxVoy

我在网上找不到解决此问题的任何内容。有没有人遇到过这个问题并有解决方案？

谢谢!

浏览器:Chrome 67.0.3396.79

操作系统:Windows 7 家庭高级版。

Sticky 在 Firefox 中按预期工作。

发现错误报告:https://bugs.chromium.org/p/chromium/issues/detail?id=805800#c9

Answer 1

问题是因为它应用于表单元素。当您单击该元素时，如果它的基本位置不在屏幕上，浏览器将被编程为转到它的位置。 Firefox 的编程方式不同，只有当元素本身 不在屏幕上时才会这样做。

要修复它，请尝试使用 position:fixed; 代替。由于元素上方没有任何内容，因此没有理由使用 sticky。