Set block: nearest with offset?

I need to be able to scroll into view with block: 'nearest' but with an offset. So this means I can have it scroll to the bottom of a div, but provide some buffer space below so the div isn’t on the exact bottom of the screen. The center option is too drastic for my use, I just need a buffer of 30 pixels or so but still want it at the bottom of the screen.

I’m hoping there is a way to do this, but if not then this would be a feature request 😃

[bluecaret]

Interesting, did not know that was a CSS option! Learn something new 👍 Thanks!

[stipsan]

The best way to do that is by using CSS, add this next to where you are using overflow: scroll or overflow: auto:

scroll-behavior: smooth;

If that is not an option you can copy the logic the library is using internally to make smooth scrolling work without adding that CSS.

import scrollIntoView from "scroll-into-view-if-needed";

const supportsScrollBehavior =
  "scrollBehavior" in document.documentElement.style;

scrollIntoView(node, {
  behavior: actions =>
    actions.forEach(({ el, top: origTop, left }, i) => {
      // apply the 30px on the first scrolling box only
      const top = i === 0 ? origTop - 30 : origTop;

      // `Element.scroll` have historically worked the same way as `window.scrollTo`
      // Browsers like Safari does not support passing the new object variant
      // and that's why the extra `supportsScrollBehavior` check is necessary
      if (el.scroll && supportsScrollBehavior) {
        el.scroll({ top, left, behavior: "smooth" });
      } else {
        if (el === document.documentElement) {
          window.scrollTo(left, top);
        } else {
          el.scrollTop = top;
          el.scrollLeft = left;
        }
      }
    })
});