Question

我有一个带有搜索输入的粘性标题。为确保锚标记 (<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>

相关帖子

Editing a sticky input element in Chrome causes the page to scroll to the top — 解决方案使用 JS 来拦截输入。如果可能的话，我宁愿在这种情况下不使用 JS。此外，该帖子中描述的原始错误似乎已修复。

Answer 1

问题是由多种原因引起的：

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

其次是因为通过将 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>

希望对你有用！

Answer 2

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

但是，如果您从 html 样式中删除 scroll-padding-top: 48px，并在目标锚点上添加 scroll-margin-top，您将获得预期的结果。

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

也可以避免使用 id 选择器，使用 :target 伪类选择器

:target {
 scroll-margin-top: 48px;
}

Answer 3

我认为 scroll-margin-top 必须进入 @Transacional。

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

在我的情况下效果很好。

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

相关帖子

3 个答案: