在Chrome中编辑固定输入元素会导致页面滚动到顶部。

Question

我在个人项目中尝试使用CSS的position: sticky属性时，注意到包含可编辑元素（如输入框或文本框）会触发页面滚动到顶部。

如果可能的话，我真的很想消除这种行为。

.container {
  height: 5000px;
}

.heading{
  background: #ccc;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  font-size: 30px;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

<h1>Lorem Ipsum</h1>

<div class="container">
  <div class="heading">
    <input placeholder="Edit this while scrolling...">
  </div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>  
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
</div>

- andreasonny83

---

“sticky”仍处于实验阶段。很有可能这只是一个未解决的错误，你最好的选择（尽管我很想看到解决方案）可能是实现自己类似于“sticky”的行为。 - George

您在哪个浏览器上看到这种行为？它在Firefox中没有出现。 - TylerH

它发生在Chrome浏览器中。 - Morpheus

在输入框超出可视范围时，在相对定位的输入框中输入文本时，垂直居中输入框（或滚动到顶部）是Chrome的默认行为。因此，我同意@George的观点，这很可能是他们尚未解决的边缘情况。 - Marvin

您实际上希望具有此行为，但前提是输入元素由于其当前粘性而可见（fiddle）。 - Marvin

Answer 1

对于像我一样浪费时间的下一个人，这个漏洞已经被报告给Chrome并已修复https://bugs.chromium.org/p/chromium/issues/detail?id=1334207

但是，当启用“enable-experimental-web-platform-features”标志时，它仍然在Chrome中可见。

- user1928596

Answer 2

您需要对密钥进行一些验证 - 可能最好使用正则表达式检查以确认可接受的字符，但您可以从keypress调用JavaScript函数，更新输入的值，并返回false：

var e = document.getElementById('input');
e.onkeypress = myFunction;

function myFunction(t) {
  document.getElementById('input').value += t.key;
  return false;
}

.container {
  height: 1000px;
}

.heading{
  background: #ccc;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  font-size: 30px;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

<h1>Lorem Ipsum</h1>

<div class="container">
  <div class="heading">
    <input id="input" placeholder="Edit this while scrolling...">
  </div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>  
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
</div>

- Brian

---

是的，这是一个不错的解决方法。虽然不完全符合我的要求，但我可以根据自己的情况进行调整。 - andreasonny83

位置：-webkit-sticky不存在。你只是在CSS中添加不必要的字节。 - BoltClock

它看起来像这里一样：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position?v=example#Sticky_positioning - Brian

当您按下退格键时，似乎它仍会滚动。 - PG20

Answer 3

我已经设法使它工作，但这可能不是最好的解决方案。

1. 在具有“position: sticky”属性的类中添加“overflow: auto”或“overflow: hidden”之一。
2. 从“<input>”中删除“placeholder”。

我不确定为什么添加“overflow”或删除“placeholder”会使其工作，也许有人可以帮忙解释一下。

.container {
  height: 5000px;
}

.heading{
  background: #ccc;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  font-size: 30px;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  overflow: auto;
}

<h1>Lorem Ipsum</h1>

<div class="container">
  <div class="heading">
    <input>
  </div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>  
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
  <div>Lorem Ipsum</div>
</div>

- akcan

---

很遗憾，这种方式在我的使用Angular Material的Angular2+项目中不起作用。无论我是否删除占位符并更改元素的溢出，问题仍然存在。 - andreasonny83

有关这方面的任何消息吗？是否有任何已报告的错误？ - user2010955

@user2010955 是的，这个 bug 已经被报告了：https://bugs.chromium.org/p/chromium/issues/detail?id=1334207 已经修复，但在启用实验性 Web 平台功能时仍然可见于 Chrome。 - user1928596