位置固定的元素在选择选项时跳动

Question

6

我尝试使用 CSS 样式 position: sticky。它很好用，但当选择元素变为活动状态时，页面会滚动回粘性元素的位置。

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

我在网上找不到任何解决这个问题的方法。有没有人遇到过类似的情况并且有解决办法？

谢谢！

浏览器：Chrome 67.0.3396.79

操作系统：Windows 7 Home Premium。

在Firefox中，固定定位的效果符合预期。

- Josh

1

很奇怪，它在我的火狐浏览器上（目前是win10）运行良好。你用的是什么浏览器？ - Frits

1

我正在使用Chrome。刚刚检查了Firefox，它也可以正常工作。 - Josh

在Safari上似乎根本不起作用。也许你应该使用<div>创建自己的选择器。 - Georgios Dimitriadis

@GeorgiosDimitriadis：我已经在CodePen中添加了-webkit-sticky。现在Safari应该可以使用了。 - Josh

请尝试使用position:fixed代替。 - Sara Kat

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- commandertuna · Accepted Answer

问题出在它被应用于表单元素上。当你点击该元素时，如果它的基准位置不在屏幕内，浏览器会跳转到该位置。Firefox 的程序设计不同，只有当元素本身不在屏幕内时才会这样做。

为了解决这个问题，请尝试使用 position:fixed; 代替。由于该元素上方没有任何东西，所以没有理由使用 sticky。