Add option to force centering

[Neek Sandhu]

Description of options.centerIfNeeded says:

Center the target if possible, and if it's not already visible. If it's not centered but still visible it will not scroll

Description of options.forceCenter would be:

Brute force version of options.centerIfNeeded. This will adjust the scroll to center the target even if it's visible already

[Cody Olsen]

The centering feature of the non-standard Element.scrollIntoViewIfNeeded is now in the draft spec. MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

To forceCenter you would simply do

import scrollIntoView from 'scroll-into-view-if-needed'

scrollIntoView(element, {block: 'center', inline: 'center'})

In a standard ltr mode, block = vertically and inline = horizontally.

There's also an ongoing discussion on how to implement the if needed part from the Element.scrollIntoViewIfNeeded that you can find here: w3c/csswg-drafts#1805

So far the consensus seems to be scrollMode: "if-needed", like so:

import scrollIntoView from 'scroll-into-view-if-needed'

scrollIntoView(element, {scrollMode: 'if-needed', block: 'center', inline: 'center'})

I will likely start ponyfilling these new APIs and spec'ed behavior instead of Element.scrollIntoViewIfNeeded, I think it's good that browser vendors and the w3c is finally working to give us proper tools to control scrolling 😄

[Cody Olsen]

v2 supports the example above 😄

[Simon Weaver]

@stipsan I just started using the library today for an list of questions with expandable answers. I want the question and answer to scroll onto the screen if it isn't fully visible.

I'm using:

scrollIntoView(element, { scrollMode: 'if-needed', block: 'center' })

I was quite surprised to find that the element is always centered using this method - even if it is already fully visible on screen. Is this really how it's supposed to work or am I doing something stupid?

The unsupported 'scrollIntoViewIfNeeded' in Chrome does what I would expect - and only scrolls to the center if the item is partially off the screen. This behavior is exactly how you'd expect a list of questions to work.

Instead I have had to switch to block: 'nearest' which effectively does nothing if the item is fully on screen already.

Happy to open an issue but I can't imagine I'm the first person to notice this.

[Cody Olsen]

@stipsan I just started using the library today for an list of questions with expandable answers. I want the question and answer to scroll onto the screen if it isn't fully visible.

I'm using:

scrollIntoView(element, { scrollMode: 'if-needed', block: 'center' })

I was quite surprised to find that the element is always centered using this method - even if it is already fully visible on screen. Is this really how it's supposed to work or am I doing something stupid?

The unsupported 'scrollIntoViewIfNeeded' in Chrome does what I would expect - and only scrolls to the center if the item is partially off the screen. This behavior is exactly how you'd expect a list of questions to work.

Instead I have had to switch to block: 'nearest' which effectively does nothing if the item is fully on screen already.

Happy to open an issue but I can't imagine I'm the first person to notice this.

Hey can you share a reproduction of this? It should indeed only center when needed 🤔