`scrollIntoView` should account for `scroll-margin` of element

[nwidynski]

Provide a general summary of the issue here

Found while working on the carousel/rotator RFC - Our scrollIntoView shim correctly scrolls the visible layout rect into view, but does not consider scroll margins. This is not in parity with the native behavior of element.scrollIntoView().

🤔 Expected Behavior?

Element should be scrolled to its visible layout rect offset by its scroll margin.

😯 Current Behavior

Element is only visibly scrolled into view, even though scroll margin explicitly marks a wish to scroll to an offset.

💁 Possible Solution

getComputedStyle for the element as well when scrolling in to view. Then offset the rect to account for margin in px.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Visit the example in https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
2. Scroll the "Go to bottom" button (scroll-margin of 60px) out of view
3. Run this script in the console:

document.getElementById('go-to-bottom').scrollIntoView({block: 'nearest', container: 'nearest'})

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OSX

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

@snowystinger Also FYI, I'm pretty sure this shim has been obsolete for a while. Not sure what the browser release target for react-aria is.

react-spectrum/packages/@react-aria/utils/src/scrollIntoView.ts

Lines 20 to 24 in b45f39a

	/**
	* Scrolls `scrollView` so that `element` is visible.
	* Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
	* but doesn't affect parents above `scrollView`.
	*/

[devongovett]

I think the container: 'nearest' option is very new. https://chromestatus.com/feature/5100036528275456