Offset with smooth scroll

I am trying to get a smooth scroll to an element with a sticky navigation bar.

Overriding behavior (to add an offset) also overrides the smooth scroll. Can someone give me some advice on how to make this work?

const scrollIntoViewSmoothly =
  'scrollBehavior' in document.documentElement.style
    ? scrollIntoView
    : smoothScrollIntoView

scrollIntoViewSmoothly(node, {
      block: 'start',
      behavior: (actions) =>
        actions.forEach(({ el, top, left }, i) => {
          el.scrollTop = i === 0 ? top - 90 : top
          el.scrollLeft = left
        }),
    })

[stipsan]

Alright I’ve had a rethink. Right now if you give behavior a callback this library will simply forward everything to scroll-into-view-if-needed and no animation happens unless the browser can do it natively, which is confusing and not very helpful since if that’s what you need you should just use scroll-into-view-if-needed directly instead of this library.

I’ll make a new major release that lets you map over the coordinates when you provide a custom behavior, applying offsets as needed:

// Given this markup:
// <div id="app" style="height: 100vh; overflow: auto;">
//   <header style="position: fixed; left: 0; top: 0; right: 0; height: 50px" />
//   <div id="hero" />
//   <footer id="contact-us" />
// </div>

import scrollIntoView from "smooth-scroll-into-view-if-needed";
const node = document.getElementById("contact-us");

scrollIntoView(node, {
  behavior: actions =>
    actions.map(action => {
      // Ensure the offset is only applied
      // to the element that needs it.
      if (action.el.matches("#app")) {
        // Apply the minimum needed scroll padding
        // to stay underneath the sticky header.
        action.top = Math.max(50, action.top);
      }

      return action;
    })
});

That’ll solve these kind of challenges for now. In the long run I want to extend compute-scroll-into-view itself to support either https://css-tricks.com/almanac/properties/s/scroll-padding/ directly, or provide the API needed to build it in packages like scroll-into-view-if-needed. The scroll-margin|padding spec is only used in scroll snapping as far as I know, I’m not aware of any browsers supporting it for scrollIntoView and .focus APIs yet but I’m keeping an eye out for when that happens 😄

[0xsven]

So I have worked around it by giving the element the style rule: padding-top: 90px and the element before the style rule: margin-bottom: -90px