时间戳

首页 > 解决方案 > 使用启用平滑滚动的 scrollIntoView() 时如何考虑固定导航？

javascript - 使用启用平滑滚动的 scrollIntoView() 时如何考虑固定导航？

问题描述

所以我一直没能找到一种方法来使用element.scrollIntoView({behavior: 'smooth'})，同时仍然考虑一个固定的导航。滚动效果很好，但固定导航总是覆盖我试图滚动到的标题。我在网上环顾四周，找到了一些其他的解决方案。但我还没有找到一个包含平滑滚动行为的。我想避免突然跳转到卷轴。

标签： javascriptcss

解决方案

为了避免这种行为，您可以只使标题静态定位并将其放置在滚动的上方div，而不是使用固定的标题。

function doIt() {
  const header = document.getElementById("header1");
  header.scrollIntoView({
    behavior: "smooth"
  });
}
body {
  display: flex;
  flex-direction: column;
  overflow: none;
  height: 100%;
  position: absolute;
}

nav {
  height: 100pt;
  flex-shrink: 0;
  background-color: black;
  color: white;
}

section#content {
  flex-grow: 1;
  overflow-y: auto;
}
<body>
  <nav>
    This is a nav bar.
    <a href="#" onclick="doIt()">go to header1</a>
  </nav>
  <section id="content">
    <h1 id="header1">
      This is a header.
    </h1>
    <p>
      This is some text. Lorem ipsum dolor sit amet, nam decore labore accumsan no. Ad perfecto inciderint eum, quaeque reprimique an sea. Et omnis ridens option vim, ex vix dico oblique repudiandae, idque accommodare ut usu. Erant consequat intellegam vis
      id, dolorum ancillae mandamus mel eu. Quo elit solum ridens ad, nibh docendi recusabo eu qui. Dolorem quaestio pri ea, etiam aeterno vim ei. Te oporteat maiestatis constituam sea, mea euripidis vulputate id. Mea populo persequeris instructior ea.
      Ut graecis cotidieque pri.</p>
    <h1 id="header2">
      This is another header.
    </h1>
    <p>
      Quo cu iriure conceptam, inani molestiae usu te, cum et dolorum denique epicuri. Adhuc iusto vel ei, eos ex efficiantur theophrastus, tale sanctus erroribus eos cu. Mollis regione accusam nam ex. Te vim dolorem qualisque, ex per odio putent intellegat,
      et percipitur liberavisse nec. Usu porro causae ne, no possim definiebas his. Wisi utroque has an. An qui evertitur elaboraret suscipiantur, eam adipisci conceptam eu, graeco nusquam inimicus ut usu. Officiis molestiae ullamcorper vis eu, no laudem
      graeci contentiones per, id salutandi dissentiunt cum. An eam natum alterum, fugit paulo ad his. Intellegebat definitiones ex sed, ea per suas tincidunt, mei in viderer partiendo conclusionemque. Ullum appetere in nec, stet vivendo consetetur eu
      eos.
    </p>
  </section>
</body>

将此与具有固定导航栏的版本进行对比：

function doIt() {
  const header = document.getElementById("header1");
  header.scrollIntoView({
    behavior: "smooth"
  });
}
nav {
  height: 100pt;
  position: fixed;
  top: 0;
  background-color: black;
  color: white;
  width: 100%;
}

section#content {
  overflow-y: auto;
  width: 100%;
  margin-top: 100pt;
}
<body>
  <nav>
    This is a nav bar.
    <a href="#" onclick="doIt()">go to header1</a>
  </nav>
  <section id="content">
    <h1 id="header1">
      This is a header.
    </h1>
    <p>
      This is some text. Lorem ipsum dolor sit amet, nam decore labore accumsan no. Ad perfecto inciderint eum, quaeque reprimique an sea. Et omnis ridens option vim, ex vix dico oblique repudiandae, idque accommodare ut usu. Erant consequat intellegam vis
      id, dolorum ancillae mandamus mel eu. Quo elit solum ridens ad, nibh docendi recusabo eu qui. Dolorem quaestio pri ea, etiam aeterno vim ei. Te oporteat maiestatis constituam sea, mea euripidis vulputate id. Mea populo persequeris instructior ea.
      Ut graecis cotidieque pri.</p>
    <h1 id="header2">
      This is another header.
    </h1>
    <p>
      Quo cu iriure conceptam, inani molestiae usu te, cum et dolorum denique epicuri. Adhuc iusto vel ei, eos ex efficiantur theophrastus, tale sanctus erroribus eos cu. Mollis regione accusam nam ex. Te vim dolorem qualisque, ex per odio putent intellegat,
      et percipitur liberavisse nec. Usu porro causae ne, no possim definiebas his. Wisi utroque has an. An qui evertitur elaboraret suscipiantur, eam adipisci conceptam eu, graeco nusquam inimicus ut usu. Officiis molestiae ullamcorper vis eu, no laudem
      graeci contentiones per, id salutandi dissentiunt cum. An eam natum alterum, fugit paulo ad his. Intellegebat definitiones ex sed, ea per suas tincidunt, mei in viderer partiendo conclusionemque. Ullum appetere in nec, stet vivendo consetetur eu
      eos.
    </p>
  </section>
</body>

至少在 Firefox 中，这个版本似乎也可以工作。也就是说，您也可以在容器顶部简单地插入填充或边距。但是，这可能不太可靠。

推荐阅读