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

ifmq2ha2 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(154)

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

css

来源：https://stackoverflow.com/questions/44438958/editing-a-sticky-input-element-in-chrome-causes-the-page-to-scroll-to-the-top

3条答案

按热度按时间

axr492tv1#

我已经设法使它工作，但它可能不是最好的解决办法。
1.将overflow: auto或overflow: hidden添加到具有position: sticky的类中。
1.从<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>

赞(0）回复(0）举报 2022-12-15

wswtfjt72#

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

赞(0）回复(0）举报 2022-12-15

r8xiu3jd3#

对于下一个像我一样浪费时间的人，这个错误已报告给Chrome，并已修复https://bugs.chromium.org/p/chromium/issues/detail?id=1334207
但是，当启用enable-experimental-web-platform-features标志时，它在chrome中仍然可见

赞(0）回复(0）举报 2022-12-15

我来回答

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

3条答案

相关问题

热门标签

最新问答