在启用了平滑滚动的情况下使用scrollIntoView（）时，如何考虑固定的导航？

Question

因此，我仍然无法找到一种使用element.scrollIntoView({behavior: 'smooth'})同时仍要考虑固定的导航。 滚动效果很好，但是固定的导航始终覆盖我要滚动到的标题。 我在网上四处张望，找到了其他解决方案。 但是我还没有找到一种包含平滑滚动行为的工具。 我想避免突然跳到滚动条。

Answer 1

为了避免，而不是具有固定头这种行为，你可以使静态定位的头，并把它上面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中，此版本似乎也可以使用。 也就是说，您还可以简单地在容器顶部插入填充或边距来摆脱困境。 但是，这可能不太可靠。

Answer 2

使用固定标头时，我的高度与主体上的固定标头相同。 因此，如果导航栏的高度为64px，则在主体上使用64px的padding-top。

.navbar {
    height: 64px;
}

body {
    padding-top: 64px;
}

应该很容易理清。

在启用了平滑滚动的情况下使用scrollIntoView（）时，如何考虑固定的导航？

问题描述

2 个解决方案

解决方案1
1 2018-05-26 03:33:48

解决方案2
0 2018-05-26 05:49:54

在启用了平滑滚动的情况下使用scrollIntoView（）时，如何考虑固定的导航？

问题描述

2 个解决方案

解决方案1 1 2018-05-26 03:33:48

解决方案2 0 2018-05-26 05:49:54

解决方案1
1 2018-05-26 03:33:48

解决方案2
0 2018-05-26 05:49:54