The mobile table of contents experiences a scrolling penetration issue

[justin5267]

What version of starlight are you using?

0.11.1

What version of astro are you using?

3.3.2

What package manager are you using?

npm

What operating system are you using?

win11

What browser are you using?

chrome

Describe the Bug

Wherein scrolling the mouse within the dropdown menu does not affect the toc content but instead causes the underlying document to scroll.

Link to Minimal Reproducible Example

bandicam.2023-10-24.10-14-50-755.mp4

Participation

• I am willing to submit a pull request for this issue.

[delucis]

Thanks for the issue @justinliu1985! This should be fixable by setting overscroll-behavior: contain; on the scroll element:

starlight/packages/starlight/components/MobileTableOfContents.astro

Lines 23 to 25 in c7112f9

	<div class="dropdown">
	<TableOfContentsList toc={toc.items} isMobile />
	</div>

Officially our browser support includes some older versions of Safari that don’t support overscroll-behavior (15.4–15.6 desktop, and 15.4–15.7 on mobile), but that’s a small percentage of supported users and this feels like a good candidate for progressive enhancement where the current behaviour impacting a few people would be acceptable.

Happy to receive a PR if someone would like to make one!