小编and*_*y83的帖子

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

position: sticky当我注意到里面有输入字段或文本区域等可编辑元素时,我试图在我的个人项目中使用css ,触发页面滚动到顶部.

如果可能的话,我真的想删除这种行为.

.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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css google-chrome css-position sticky

and*_*y83

2017 06-08

18
推荐指数

1
解决办法

1188
查看次数