在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>

Answer 1

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

Answer 2

我设法让它发挥作用，但它可能不是最好的解决方案。

1. 添加overflow: auto或overflow: hidden添加到position: sticky的班级。
2. 从placeholder。
中删除<input>

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

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;