我有一个带搜索输入框的固定头部。为了确保锚标签 (<a href='#section'>
) 不会被头部遮挡,我添加了以下 CSS。
html {
scroll-padding-top: 48px
}
然而,如果置顶的标题栏中包含输入框,用户在输入时整个页面都会滚动。
是否有一种方法可以保持当前的滚动填充行为并在使用输入框时防止自动滚动?最好只使用HTML和CSS实现。
html {
scroll-padding-top: 48px;
}
body {
margin: 0;
}
header {
position: sticky;
top: 0;
background: #eeeeee;
padding: 8px 16px;
}
main {
padding: 8px 16px;
}
main article,
main div {
padding: 32px 0;
border-bottom: 1px solid lightgray;
}
main div {
background: #ddddff;
}
<html>
<body>
<header>
<input type='text' placeholder='type here, page scrolls' />
</header>
<main>
<article>
<p><a href='#anchor-point'>click me to skip down to the lower section</a></p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<div id='anchor-point'>
I also want to link to here. This section should not get cut off by the sticky header. The entire thing should be visible.
</div>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
<article>
<p>some useless text just to fill up vertical space and allow for scrolling</p>
</article>
</main>
</body>
</html>
相关文章
在Chrome中编辑粘性输入元素会导致页面滚动到顶部 - 解决方案使用JS拦截输入。如果可能的话,我不想在这种情况下使用JS。此外,该文章中描述的原始错误似乎已经得到修复。
:target
伪选择器真是太聪明了!这意味着它适用于您滚动到的每个单独元素,而不仅仅是由特定类或ID定义的那些元素。 - Nickscroll-padding-top
切换为scroll-margin-top
。谢谢! - Lionel T