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

[Aidam1]

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)

• Fixes [Bug]: NavDrawer shows divider above Footer when scrolled to the bottom #36331

[Aidam1]

@microsoft-github-policy-service agree

[PaulGMardling]

You’ve done a great job tracking down the root cause here and landing on a more robust fix for the bottom scroll detection.

I had a couple of small non-blocking suggestions to tighten up the final shape a bit, mostly around readability and making the intent a little clearer for future readers.

I added some unit test coverage on to help lock in the regression scenario, but overall this looks good to me.