Skip to content

Commit

Permalink
fix: not force fill auto
Browse files Browse the repository at this point in the history
  • Loading branch information
zombieJ committed Mar 7, 2024
1 parent 6253c1b commit 508bd9c
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 8 deletions.
6 changes: 5 additions & 1 deletion docs/examples/getScrollBarSize.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,23 @@ const cssText = `
`;

export default () => {
const defaultRef = React.useRef<HTMLDivElement>();
const webkitRef = React.useRef<HTMLDivElement>();
const scrollRef = React.useRef<HTMLDivElement>();
const [sizeData, setSizeData] = React.useState('');

React.useEffect(() => {
const originSize = getScrollBarSize();
const defaultSize = getTargetScrollBarSize(defaultRef.current);
const webkitSize = getTargetScrollBarSize(webkitRef.current);
const scrollSize = getTargetScrollBarSize(scrollRef.current);

setSizeData(
[
`Origin: ${originSize}`,
`Default: ${defaultSize.width}/${defaultSize.height}`,
`Webkit: ${webkitSize.width}/${webkitSize.height}`,
`Webkit: ${scrollSize.width}/${scrollSize.height}`,
`Scroll: ${scrollSize.width}/${scrollSize.height}`,
].join(', '),
);
}, []);
Expand All @@ -55,6 +58,7 @@ export default () => {
overflow: 'scroll',
background: 'yellow',
}}
ref={defaultRef}
>
Origin
</div>
Expand Down
20 changes: 13 additions & 7 deletions src/getScrollBarSize.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,31 @@ function measureScrollbarSize(ele?: HTMLElement): ScrollBarSize {

// Set Webkit style
const webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
const width = parseInt(webkitScrollbarStyle.width, 10);
const height = parseInt(webkitScrollbarStyle.height, 10);

Check warning on line 40 in src/getScrollBarSize.tsx

View check run for this annotation

Codecov / codecov/patch

src/getScrollBarSize.tsx#L39-L40

Added lines #L39 - L40 were not covered by tests

// Try wrap to handle CSP case
try {
const widthStyle = width ? `width: ${webkitScrollbarStyle.width};` : '';
const heightStyle = height
? `height: ${webkitScrollbarStyle.height};`
: '';

Check warning on line 47 in src/getScrollBarSize.tsx

View check run for this annotation

Codecov / codecov/patch

src/getScrollBarSize.tsx#L46-L47

Added lines #L46 - L47 were not covered by tests

updateCSS(
`
#${randomId}::-webkit-scrollbar {
width: ${webkitScrollbarStyle.width};
height: ${webkitScrollbarStyle.height};
}
`,
#${randomId}::-webkit-scrollbar {
${widthStyle}
${heightStyle}
}`,
randomId,
);
} catch (e) {
// Can't wrap, just log error
console.error(e);

// Get from style directly
fallbackWidth = parseInt(webkitScrollbarStyle.width, 10);
fallbackHeight = parseInt(webkitScrollbarStyle.height, 10);
fallbackWidth = width;
fallbackHeight = height;

Check warning on line 63 in src/getScrollBarSize.tsx

View check run for this annotation

Codecov / codecov/patch

src/getScrollBarSize.tsx#L62-L63

Added lines #L62 - L63 were not covered by tests
}
}

Expand Down

0 comments on commit 508bd9c

Please sign in to comment.