When im using element.scrollIntoView(true)

foundItem.scrollIntoView({
        block: "center" // or 'start'
        behavior: "smooth"
      });

scroll working is not correnctly

reproduce link
https://codesandbox.io/s/react-fiddle-forked-bvesc?file=/src/App.js

Hi
in RTL page vertical scroll bar appear in left side of elements and its visible when use rc-scrollbars in version 1.0.0 the main div have scrollBar class name and with this class , I fix this issue in my project but in version 1.0.3 scrollBar class removed and all scroll bar visible again

I tried using autoHeightMax="100%", but it was not working.

This seems like a good place to start when tackling the former PR's
See: malte-wessel/react-custom-scrollbars#88

I assume the new project doesn't have RTL support. I'll test this out when I get time, unless someone beats me to it.

I read previous discussion about the same error #15
Provided fix (#17) works fine for Chrome (Win10), but does not for Firefox (dev edition 117.0b9 (64-bit) + Win10)

Example: https://2n8jhh.csb.app/
(source https://codesandbox.io/s/rc-scrollbars-test-forked-2n8jhh)

The problem is with function getPxRatio() src/utils/getScrollbarWidth.ts
In FF window.screen.availWidth === document.documentElement.clientWidth for all zoom levels when page body doesn't have vertical scrollbar. Function always returns 1 and that does not trigger the scrollbarWidth updating.

window.screen.availWidth !== document.documentElement.clientWidth when page has vertical scrollbar. In this case scrollbarWidth is updating correctly.

Is there a way to add our own customer event handlers for certain components? For instance, I am trying to add a onMouseDown event handler for thumbVertical. I have tried adding the onMouseDown JSX attribute to renderThumbVertical, but it seems like my custom event handler is being overridden by Scrollbars.prototype.handleVerticalThumbMouseDown. Removing this event listener using the Chrome DevTools allows my custom event handler to be called.

I am currently working around this by using the onPointerDown JSX attribute instead, but this is more of a hack and not a solution.

Is there a built-in way to override this behavior, and if not, are there plans to add such a capability in the future? Thanks.

Description

Hi everyone! When I'm using RC Scrollbars I can't use a Popover component inside of it. For some reason, it simply won't work.

Link to Reproduction

https://codesandbox.io/s/chakra-scrollbars-5t49x?file=/src/index.tsx

Steps to reproduce

1. Click on the first button. You will see it works without the Scrollbars;
2. Click on the first button. You will see it don't work with Scrollbars

Additional Information

Related to chakra-ui#4709

Hello, I want to use library, but after installing I faced with
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\Projects\node_modules\rc-scrollbars\lib\Scrollbars'

React: 16.13.1

How can I fix it?

Hello, is there a legitimate way to render content from the bottom?
We used this renderView:

const renderView = props => {
  const style = {
    ...props.style,
    display: 'flex',
    flexDirection: 'column-reverse'
  }
  return <div {...props} style={style} />
}

But somehow it stopped working properly and if we use it, the scrollbar starts at the top and doesn't want to go down (only up).
What we want to achieve is similar to what you can see in chats - scroll starting at the bottom and going up.
Here is the example with renderVIew I mentioned: https://codesandbox.io/s/confident-fermi-n3q9q?file=/src/SpringScrollbarsExample.js

I'm struggling here to figure out the correct types for the style object that gets passed to renderThumbVertical.
This is my current code:

...
type ThumbVerticalBaseStyles = {
		backgroundColor: string;
		borderRadius: string;
		cursor: string;
		display: string;
		height: string;
		position: string;
	};
	const thumbVertical = ({
		style = {} as ThumbVerticalBaseStyles,
		...props
	}) => {
		const finalStyle = {
			...style,
			visibility: 'hidden'
		};

		return <div style={finalStyle} {...props} />;
	};

	return (
		<div className={'table-container wide'}>
			<header>
				<h3>{customers.length} Customers</h3>
			</header>
			<Scrollbars
				autoHeight
				autoHeightMin={0}
				autoHeightMax={'calc(100vh - 40px)'}
				renderThumbVertical={thumbVertical}
...

Now on that line return <div style={finalStyle} {...props} />;,
I am getting the following error: TS2322: Type '{ visibility: string; backgroundColor: string; borderRadius: string; cursor: string; display: string; height: string; position: string; }' is not assignable to type 'Properties<string | number, string & {}>'.   Types of property 'position' are incompatible.     Type 'string' is not assignable to type 'Position | undefined'. index.d.ts(1850, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

I'll try to maintain a list of PR's that have been addressed. This will be a mega thread if spammed, so please look for the issue that will be opened on the matter.

1. RTL - new thread

I'm not exactly what that thing is called, but the actual thing that moves up and down on the scrollbar. It is very hard to see on my dark background. I'm wondering if there is a way to add a custom style to it so I could change the color on it a bit.

Scrollbars not appearing/disappearing when internal elements height changes.

Bug is reproducible on Chrome, Edge, Opera, but works as intended on Firefox.

Repro project: https://codesandbox.io/s/react-hooks-usestate-forked-utzu8n?file=/src/index.js

1. Increase height with "+" button until content no longer fits into scroll view
2. Notice scrollbar not appearing
3. Try scrolling down with mouse wheel/track pad for scrollbars to appear.
4. Decease height with "-" button until content content fits into scroll view
5. Notice scrollbar not disappearing

first thanks for the excellent work, supporting this library.

I am trying to use this library with NextJs.
I am using the "universal" property, as recommended in the documentation, but even so I always get the following error:

ReferenceError: window is not defined

The error indicates the following files:
rc-scrollbars\lib\utils\getScrollbarWidth.js:8:15)
rc-scrollbars\lib\utils\index.js:11:27)

I also tried to copy the example from the documentation, but I was also unsuccessful.
Am I doing something wrong?

i am using NjextJs in 9.5.4 version

Hello, thanks for supporting awesome library.

After upgrading I noticed this error:

Considering trying this out for our app, but there's an example I kind of feel is missing. All the current examples seem to all specify both width and height in pixels.

Would this component work without one of them, and the other just being like 100% or just behave like a block filling the horizontal space by default?

Basically we have some wide tables on our website, and I don't want to limit their vertical height, and the width should just be as much as is available in its container. 🤔

Hi! First of all, thanks for the fork and revival.

My scrollable list component renders a div that I would like to replace with Scrollbars. It works fine out of the box, but it doesn't seem that Scrollbars supports an id prop, which I am currently passing to the div in order to lazy-load images using the intersection observer API.

Would it be possible to support an id prop?

I've disabled the native scrollbars with css on the whole page:

::-webkit-scrollbar {
    display: none;
    width: 0; /* remove scrollbar space */
    background: transparent; /* optional: just make scrollbar invisible */
}

::-moz-scrollbar {
    display: none;
}

::-o-scrollbar {
    display: none;
}

But then the scrollbars from the library also disappears. Is it by design to also hide the custom ones when add the css above?
My point was to use custom scrollbars while disabling the native one...

https://codesandbox.io/s/react-playground-forked-9crjf

Hi. Currently, if we enable autoHide mode, we get scrollbars to show when a user starts scrolling. I don't think that's the best UX for desktop browsers. Is there any change to support hover mode? When a user hovers the scrollable element, scrollbars should show up.

Thank you for taking over the project 👏

I tried to move my project to rc-scrollbars, but it seems I cannot set className to <Scrollbars />, would it be possible to add it?

Hi. Thanks for restoring the project!
Can you rename Props interface to something like ScrollbarProps and export it so we can extend it from the outside?

Wheeling on scrollbars won't scroll the view. It will be better if this feature is available. Thanks a lot.

Hi, I used this react component a few days ago, It's very efficient!

But, today I find a compatibility problem. It does't work when Google Chrome is set to not show the scroll bar by default.

The cause of the problem is the getScrollbarWidth.ts file. You will get number 0 by function getScrollbarWidth when Google Chrome is set to not show the scroll bar by default. Because the value of div.offsetWidth equal to the value of div.clientWidth.

rc-scrollbars is awesome, if it can support ESM will be better! :)

Hello, is this possible to fix? You can recreate this issue if you go to the demo page and just zoom out, the default browser scrollbar will appear.

Thanks for restoring the project!

I am using this in my app and it is creating a horizontal scrollbar due to some slight overflow that I do not want. I found this issue with code sample in the repo this is based off of here: malte-wessel/react-custom-scrollbars#213

But I tried the code:

renderTrackHorizontal={(props) => (
	<div
		{...props}
		style={{ display: 'none' }}
		className={'track-horizontal'}
	/>
)}

But that did not appear to do anything.