在 Chrome 中编辑粘性输入元素会导致页面滚动到顶部答案

【问题标题】：Editing a sticky input element in Chrome causes the page to scroll to the top在 Chrome 中编辑粘性输入元素会导致页面滚动到顶部
【发布时间】：2017-11-10 08:38:14
【问题描述】：

我在我的一个个人项目中尝试使用 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>

【问题讨论】：

sticky 仍处于试验阶段。很有可能这只是一个未解决的错误，而您最好的选择（尽管我希望看到解决方案）可能是实现您自己的粘性行为。
您在哪个浏览器上看到此行为？它不会出现在 Firefox 中。
它发生在 Chrome 中
当输入超出查看范围的输入字段时，垂直居中输入字段（或在这种情况下滚动到顶部，因为上面没有足够的内容）是 Chrome 中相对的默认行为定位输入，所以我和@George 一起去，这很可能是他们没有解决的边缘情况。
您实际上想要这种行为，但如果输入元素是可见的，因为它当前是粘性的 (fiddle)。

标签： html css google-chrome css-position sticky

【解决方案1】：

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

将overflow: auto 或overflow: hidden 添加到具有position: sticky 的类。
从<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>

【讨论】：

不幸的是，这种方法不适用于我使用 Angular Material 的 Angular2+ 项目。无论我删除占位符并更改元素的溢出，问题仍然可见
有什么消息吗？是否有任何报告的错误？

【解决方案2】：

您必须对密钥进行一些验证 - 最好使用正则表达式检查来确认可接受的字符，但您可以从按键调用 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>

【讨论】：

是的，这是一个很好的方法。不是 100% 我想要的，但我可以重新适应我自己的场景。
位置：-webkit-sticky 不存在。你只是通过拥有它来向你的 CSS 添加不必要的字节。
它看起来像在这里：developer.mozilla.org/en-US/docs/Web/CSS/…