details-dialog-element icon indicating copy to clipboard operation
details-dialog-element copied to clipboard

Option to preventScroll on focus

Open evanminto opened this issue 3 years ago • 2 comments

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.

evanminto avatar Mar 15 '21 21:03 evanminto

👋🏻 Do you have any reproduction code so we can take a look?

koddsson avatar Mar 18 '21 14:03 koddsson

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.

evanminto avatar Mar 18 '21 20:03 evanminto