粘性标题输入在输入时滚动

问题描述 投票：0回答：4

我有一个带有搜索输入的粘性标题。为了确保锚标记 (

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

相关帖子

html css
4个回答
4
投票

这可能不是一个完整的答案，因为它没有回答“为什么？”的问题。

但是，如果您从 html 样式中删除 

scroll-padding-top: 48px
，并在目标锚点上添加 
scroll-margin-top
，您将获得预期的结果。

#anchor-point{
 scroll-margin-top: 48px;
}

也可以使用 

:target
伪类选择器来避免使用 id 选择器

:target {
 scroll-margin-top: 48px;
}
4
投票

问题是由多种原因造成的：

首先，因为如果输入内容在当前查看页面之外发生更改，默认情况下网络浏览器将滚动到该输入。

排在第二位，因为通过将属性 

scroll-padding-top: 48px
添加到 
HTML
标签，您可以“减小”可用可见页面的大小。

因此，由于这两个原因的结合，就像您的输入始终只是当前查看页面的一些像素，因此浏览器向上滚动一点以使其“可见”（这就是当我们写入或删除输入中的任何内容）。

您可以尝试以下方法：

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

    #anchor-point {
        background: none;
        z-index: -1;
        position: relative;
        padding: 0;
        height: 48px;
        margin-top: -48px;
    }
    <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"></div>
        <div>
          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>

希望它对你有用！

2
投票

我认为滚动边距顶部必须进入

#anchor-point
。

html {
    scroll-behavior: smooth;
}
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;
}
#anchor-point {
    scroll-margin-top: 48px;
}
<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>

对于我来说效果很好。

0
投票

CSS定位 如果输入字段或父元素具有 CSS 属性（例如position:fixed或position:absolute），则可能会导致浏览器在输入焦点时滚动。

解决方案：检查输入框及其父元素的CSS。确保不存在冲突的定位规则，例如position:fixed，或在必要时使用position:relative。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.