details-dialog-element
details-dialog-element copied to clipboard
Option to preventScroll on focus
I’m running into a problem where the calls to focus()
are jumping the scroll around on my page. Specifically in Chrome with the dialogs inside of a sticky header. Changing .focus()
to .focus({ preventScroll: true })
fixes the issue.
I’d love to have a prevent-scroll
attribute on the <details-dialog>
to opt into this behavior.
👋🏻 Do you have any reproduction code so we can take a look?
My bad, should have tried to isolate the problem before I sent in the issue. Turns out it was being caused by an interaction in Chrome between position: sticky
and scroll-margin
. I fixed it by removing the latter. Here’s a CodePen if anyone runs into this in their own code: https://codepen.io/vamptvo/pen/LYbKyPj
This option might still be useful in some other cases, but in this case it wasn’t directly related, so feel free to close this.