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