我试图使用CSSposition: 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>
我已经设法让它工作,但这可能不是最好的解决方案。
- 添加 添加任一
overflow: auto
or overflow: hidden
到班级与position: sticky
.
- 去除
placeholder
from <input>
.
我不知道为什么要添加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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)