Drawer (Scroll to top on Open)

[EddieLongStockings]

If I have a drawer with a lot of scrollable content. If you close the drawer, then re-open, the scroll position remains where it was last. Is there a way to make a drawer "Scroll to the top" when you initially open it? Or have the scroll position reset when you close it?

drawer.addEventListener('sl-after-show', () => {
  drawer.scroll({top:0,behavior:'smooth'});
});

[claviska]

This isn't as intuitive as I'd like it to be, and it relies on digging into the shadow root to target the scroll container.

This applies to both dialog and drawer.

 dialog.addEventListener('sl-show', () => {
  requestAnimationFrame(() => {
    dialog.shadowRoot.querySelector('[part~="body"]').scrollTop = 0;
  });
});

Example: https://codepen.io/claviska/pen/oNrbLmg?editors=1000

---

@lindsaym-fa any thoughts on this? I'm not sure the dialog should automatically reset it's scroll position, as that might not always be desirable.

A method could work, but it's still a bit awkward to use because of timing. You have to call it at least one tick after sl-show (e.g. using requestAnimationFrame()), otherwise it will be hidden and have no affect.

dialog.setScrollPosition({ top, left });

Note that you wouldn't be able to call it after sl-hide because it will show jank, and it will already be hidden on sl-after-hide.

A property could also work, but would be less flexible.

<sl-dialog reset-scroll-on-close>
  ...
</sl-dialog>

[lindsaym-fa]

To me, whether a dialog or drawer should reset its scroll position largely depends on the specific use case. Some cases, like when a dialog contains a long form, might work best when the scroll position is reset; others, like when a dialog contains a Terms of Service or grid-like data, would benefit from maintaining the scroll position.

Generally, it seems safest for the dialog/drawer to return the user to where they left off, so I agree that the component shouldn't reset its scroll position by default. I wonder if the choice makes sense as a property of the component?