Skip to content

fix(react-drawer): tolerate fractional scroll metrics when detecting scroll bottom#36333

Open
Aidam1 wants to merge 2 commits into
microsoft:masterfrom
Aidam1:fix/36331-drawer-body-scroll-bottom-tolerance
Open

fix(react-drawer): tolerate fractional scroll metrics when detecting scroll bottom#36333
Aidam1 wants to merge 2 commits into
microsoft:masterfrom
Aidam1:fix/36331-drawer-body-scroll-bottom-tolerance

Conversation

@Aidam1

@Aidam1 Aidam1 commented Jun 23, 2026

Copy link
Copy Markdown

Previous Behavior

DrawerBody determines its scroll position (top / middle / bottom) in
getScrollState using an exact equality check:

if (scrollTop + clientHeight === scrollHeight) {
  return 'bottom';
}

At browser zoom levels above 100% (and on displays with fractional scaling), scrollTop, clientHeight, and scrollHeight can resolve to sub-pixel values, so scrollTop + clientHeight never exactly equals scrollHeight. The body then stays in the middle state even when fully scrolled to the bottom, which causes the separator between DrawerBody/NavDrawerBody and the footer to still be visible unexpectedly when the user reaches the end of the content.

New Behavior

The bottom check now allows a 1px tolerance so fractional scroll metrics still resolve to bottom. The separator now stays hidden when scrolled to the bottom, including at zoom levels of 110% and higher.

Related Issue(s)

@Aidam1

Aidam1 commented Jun 23, 2026

Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

@Aidam1 Aidam1 marked this pull request as ready for review June 23, 2026 08:50
@Aidam1 Aidam1 requested review from a team and mainframev as code owners June 23, 2026 08:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: NavDrawer shows divider above Footer when scrolled to the bottom

1 participant