Skip to content

Commit

Permalink
Now that scrollbars are resolved via a different method this isn't ne…
Browse files Browse the repository at this point in the history
…eded. it is better to match the browser rounding behavior to avoid off by 1 bugs
  • Loading branch information
jassmith committed Dec 26, 2023
1 parent 11a48c9 commit c622dac
Showing 1 changed file with 2 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -106,22 +106,6 @@ function useTouchUpDelayed(delay: number): boolean {
return hasTouches;
}

// This function is still mildly incorrect. If the scrollbar is a non integrer size it will be off by up to 0.5px.
function getExactDimensionsExcludingScrollbar(element: HTMLElement) {
// Get the precise total dimensions including the scrollbar
const rect = element.getBoundingClientRect();

// Calculate the width and height of the scrollbar
const scrollbarWidth = element.offsetWidth - element.clientWidth;
const scrollbarHeight = element.offsetHeight - element.clientHeight;

// Calculate the dimensions excluding the scrollbar
return {
width: rect.width - scrollbarWidth,
height: rect.height - scrollbarHeight,
};
}

export const InfiniteScroller: React.FC<Props> = p => {
const {
children,
Expand Down Expand Up @@ -207,10 +191,8 @@ export const InfiniteScroller: React.FC<Props> = p => {
lastScrollPosition.current.scrollLeft = scrollLeft;
lastScrollPosition.current.scrollTop = scrollTop;

// el.clientWidth returns a rounded result, we want a floor'd result so as to not overrun the scroll area.
const dimensions = getExactDimensionsExcludingScrollbar(el);
const cWidth = Math.floor(dimensions.width);
const cHeight = Math.floor(dimensions.height);
const cWidth = el.clientWidth;
const cHeight = el.clientHeight;

const newY = scrollTop;
const delta = lastScrollY.current - newY;
Expand Down

0 comments on commit c622dac

Please sign in to comment.