Hi, this is a great tool, but I can't seem to figure out how to make the custom render for trackX work. When I get the props like in the example:
trackXRenderer={ props => { const {elementRef, ...restProps} = props; return <span {...restProps} className="MyAwesomeTrackVertical" ref={elementRef}/> } }
props only has children, className, onClick, and style, with no elementRef. As a result the scroll doesn't function.

When I look in the code under dist/Track.js, I see this:
props = _objectWithoutProperties(_this$props, ["className", "renderer", "type", "elementRef", "onClick"]); props.className = "track " + (type === TYPE_X ? "trackX" : "trackY") + (className ? " " + className : ""); props.onClick = this.onClickHandler; return renderer ? renderer(props) : _react.default.createElement("div", _extends({}, props, {

It's clearly stripping out the elementRef property before calling my custom render function.

Is this by design? Am I meant to somehow implement the custom render without the elementRef property?

Thanks,

Nathan

I have an error with my customization (version 4.0.0-alpha.13):
Invalid value for prop renderer on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

Did you know to fix this?

Sample code of my component:
wrapperProps={{ renderer: (props) => { const { elementRef, ...restProps } = props; return <div ref={elementRef} {...restProps} className={classes.wrapper}/>; }, }}

In case of clicking track while noScroll={true} permanentTracks={true} scroll still performs.

On Safari in the demo, scroll sideways on the "Custom Style" block with finger or trackpad, making sure to keep scrolling past the end of the content.

Expected: The thumb should be stopped at the end of the track. Best case, the length of the thumb shrinks proportional to the overrun, like the native iOS scroll bar.

Observed: The thumb keeps going past the end of the track.

After putting nativeScrollbars prop onto <Scrollbar nativeScrollbars /> and setting it to true, I get the standard react warning:

React does not recognize the 'nativeScrollbars' prop on a DOM element.

Also, setting the prop to true doesn't change the scrollbars to be native, unless there is something I'm missing?

overflow: scroll forces the default scrollbar to be visible at all times, while overflow: auto only shows it when needed.

Too few items to fill whole area:

Enough items to fill the area:

Markup:

<div className="container">
    <Scrollbar style={{ width: '100%', height: '100%', minHeight: 80 }}>
        {...items}
    </Scrollbar>
</div>

Styles:

.container {
    width: 300px;
    height: 300px;
}

getScrollbarWidth crashes on Node.js because of let doc = document; on line 2

Pull request - #27

I was overriding some styles and noticed that these should/could be removed.
https://github.com/xobotyi/react-scrollbars-custom/blob/master/src/index.js#L39
https://github.com/xobotyi/react-scrollbars-custom/blob/master/src/index.js#L45
Specifying both bottom/left and top/right should be enough (but maybe I am missing some edge case).

Btw, loving this lib. Was using react-custom-scrollbars before but came here as this is much neater. Wp!

The props I am having trouble with are:

ScrollToTop (is this the same as scrollTop?)
ScrollToBottom
onScrollStop (is apparently called onScrollEnd mismatch in docs)
wrapperRenderer
trackYRenderer
trackXRenderer
thumbYRenderer
thumbXRenderer
contentRenderer

Is it possible to have the scrollbars be an overlay on top of the contained content, rather than taking up space from the container?

This would be similar to how macOS handles scrollbars where the scrollbars are transparent (excluding the actual handle).

I'm using react-custom-scrollbars in my project, but I have just come across this project and the performance looks great! I've tried to migrate to the library, but I've hit one snag:

I am trying to detect when the user has scrolled to the bottom of the panel using the onScroll prop. Is there enough information in the scrollValues object to work this out?

Do you want to request a feature or report a bug?
Report a bug
What is the current behavior?

I am trying to test the component with the enzyme's mount but it returns the following error:

TypeError: (0 , _domCss2.default) is not a function

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

import { mount } from 'enzyme';

const mountSubject = () =>
	mount(<React.Fragment>
				<div className="hierarchy-tree-selection-wrapper">
					<Scrollbar
						autoHide={true}
						autoHideTimeout={1000}
						autoHideDuration={200}
						renderThumbHorizontal={this.renderThumb}
						renderThumbVertical={this.renderThumb}
					>
						<div className="hierarchy-tree-selection">{this.files}</div>
					</Scrollbar>
				</div>
			</React.Fragment>
 );

it('should mount hierarchy', () => {
		const renderedComponent = mountSubject();
		const nodes = renderedComponent.find('.component-mode');
		expect(nodes.length).toEqual(12);
	});

What is the expected behavior?
Mount the component

Which versions of library, and which browser / OS are affected by this issue? Did this work in previous versions of library?

react-scrollbars-custom: 3.1.5. I am running it with Jest. I tried to downgrade versions but does not worked.

Do you want to request a feature or report a bug?
bug

What is the current behavior?
trackXVisible class presented even if horizontal scrolling is unavailable

What is the expected behavior?
trackXVisible class should be presented only if horizontal scrollbar is visible

Which versions of library, and which browser / OS are affected by this issue? Did this work in previous versions of library?
3.1.5

Please correct me if I'm wrong but based on the official demo and my own example I see that there is a need for one more wrapper element with display: inline-block style. Without that missing element, content seems to not respect the padding-right style on the absolutely positioned parent element.

Here is my fixed example:
https://codesandbox.io/s/1wrx623273

Before fix (current state):

With additional wrapper:

This wrapper element might be a part of a library as it won't work correctly without it. Please tell me what do you think about that idea.

I wanted to check bundle size, but I'm unable to. You have correctly added react and react-dom, so maybe you could fix this with a proper prop-types version too.

In macOS and Ubuntu, clicking on the scrollbar track doesn't center the thumb at the click point. Instead, it moves the thumb one length toward the click point.

Other apps, like VS Code, have the jump-to-click point, so I don't think the behavior should be changed unconditionally. Instead, I'd propose adding a new prop, trackClickBehavior, which is "jump" | "step", with "jump" being the default.

Native scrolling on iOS Safari applies a momentum effect after the touch is released, but this component currently stops as soon as the touch ends. This makes scrolling feel slower with this component when compared to native behavior.

As the title says, scrollTo is documented as scrollTo(x, y) but in the code its at

scrollTo(y, x) {
        this.contentEl.scrollTop = y;
        this.contentEl.scrollLeft = x;

        return this;
}

https://codesandbox.io/s/1ykjml8xxl

When the x-axis scroll is disabled in the settings you can still scroll left and right by clicking the middle mouse button and scrolling left/right whilst also scrolling up/down.

Thanks you!

In the demo, enable "always show track", and note that the thumb disappears despite the fact that the content is scrollable.

Root Cause

L716 refers to scrollY, which isn't a real property. It appears that it was supposed to be referencing noScrollY. The same is true for the horizontal property.

Do you want to request a feature or report a bug?
Request a feature

What is the current behavior?
The API does not provide a way to pass maximalThumbsSize as props.
It could be really helpful for UI reasons (sometimes the size of your scrollbar almost fit its track container size)

What is the expected behavior?
Provide the maximalThumbsSize prop. Given that maximalThumbsSize, the scrollbar should change the way the position is computed (I guess).

Cannot open the demo link in IE 11. Getting "Syntax error" in console same as when I tried adding it to my project.

What is major changes between versions 4.x.x-alpha and 3.x.x

Awesome component.
Problem is, it throws when rendered server-side with document is not defined.
You cannot use isset to check for undefined when the variable does not exist.

#23 - a pull request that resolves the issue

v3.0 wrapperEl is not defined

that could be because I'm using a custom wrapperRenderer and maybe did something wrong

really cool rework btw!

Do you want to request a feature or report a bug?
feature
What is the current behavior?
I can't open demo sites in IE (11, 10, 9), does that mean react-scrollbars-custom cannot work in IE? I've tried to use react-scrollbars-custom in my project, but it seems not work well in IE: the width of thumb-x is 0 unless I click the track-x, even after I click the track, the width is still incorrect - smaller than it should be.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

Which versions of library, and which browser / OS are affected by this issue? Did this work in previous versions of library?
3.1.5

Do you want to request a feature or report a bug?
Request a feature

What is the current behavior?
The API does not provide a way to hide the scrollbar thumb after inactivity. This is the default behavior for some browsers (on mac OS), the scrollbar is hidden when not used, once you scroll it's visible again.

What is the expected behavior?
Provide a prop to enable this hidding behavior.. And we may also have a property to set the timer after which the scrollbar thumb should appear / disappear.

Expose getBoundingClientRect or something similar that returns the entire component position. At the moment, since the component is a class, you can't get the rendered component position.

I had to encapsulate my component on a

This is a minor dev quality-of-life issue; the code formatting at the moment isn't standard and as a result any attempt to auto-format will try to change the entire index.js file. Adding a config for prettier and running auto-formatting would make it easier for others to contribute to the library.

Having type declarations would improve the autocomplete experience for TypeScript users.

Hey,
It looks like you forgot a s in the name if the package:
it should be react-scrollbars-custom instead of react-scrollbar-custom

If you attempt to scroll using the scroller on mobile then it breaks the entire page scroll ios12 https://cl.ly/7e508495550e

Hi,

I get the following warning with the latest alpha (17):

Warning: React does not recognize the compensateScrollbarsWidthprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasecompensatescrollbarswidth instead. If you accidentally passed it from a parent component, remove it from the DOM element.

In version v4.0.0alpha13 i did not get this error. Dit anything change?

This is the implementation i'm using:

<Scrollbar
   style={{width: '100%', height: '100%'}}
   ref={ref=>{this.scrollbar = ref}} 
   noScrollX
   trackYProps={{
         renderer: props => {
                    const { elementRef, style, ...restProps } = props;
                     return <div {...restProps} ref={elementRef} style={{...style, width: '5px', top: '3px', height: 'calc(100% - 3px)', background: 'rgba(179, 179, 179, 0.1)'}} />;
         }
   }}
   thumbYProps={{
        renderer: props => {
               const {elementRef, style, ...restProps } = props;
               return <div {...restProps} ref={elementRef} style={{...style, background: 'rgba(0, 0, 0, 0.1)'}} />;
       }
   }}
>
     <Content />
</Scrollbar>```

Hi, despite documentation in README it is always nice to have some live example. I know about DEMO but I don't know any easy way to view React source code, so I've made a minimal example based on your testbench code and my current knowledge.

https://codesandbox.io/s/38k0kxmp75

Feel free to improve it, add it to the README, or ignore this idea. Ideally, I would like to have DEMO page sources to check how to implement presented features.

Just giving a heads up that the demo page

https://xobotyi.github.io/react-scrollbars-custom/

Doesn't appear to be working for IE11

I noticed some ugly white lines in my dark-themed app. (Tested in chrome Version 73.0.3683.86) Seemed the scroll bars were poking into the components, not being fully hidden by the padding. I edited my styles to add a few pixels of padding - but they seemed to appear randomly.

Just realized why. The scroll bars, in chrome at least, are sized independent to the web page's zoom field. This means the 17px of padding to hide the native scroll bars only works on 100%. If you zoom out, the 17px scales, but the scroll bars don't.

You can reproduce it on the Demo page by zooming out a little:

It's not much of an issue if you've got a pale background as they blend in until zoom levels that are just silly. But in dark apps (probably a major reason for styling scroll bars to begin with!) even a tiny bit of the scroll bar sticks out like a sore thumb.

Not sure if the 17px could be converted to a zoom-independent CSS unit?

Consider the following code:

<Scrollbar trackVerticalStyle={{ background: 'rgba(0, 0, 0, 0)' }}><p>Hello world</p></Scrollbar>

In this case, I'd expect the track to render with no color, making it effectively invisible while still showing the thumb. However, the default style overrules my customization, which means it's impossible to change the color of the track without turning off all default styles, which is overkill.

This can be addressed by flipping the order of the spreads in index.js so that the user provided styles - if they exist - are applied after the defaults but before the styles that are necessary for the library to work.

This change shouldn't be hard, but I'm waiting for a decision on #18 before pushing the PR.

I don't want to have a fixed height, just a max-height. My goal is to create a dropdown list selector which is only as big as it needs to be (depending on how many items it has). But then after reaching a certain max height will display scrollbars. I see this component is already smart enough to only show scrollbars when it needs to. But I don't know how to get it to work with a height based on it's children.

Bonus: Would be cool if it were possible to make is scroll after a certain number of children.

E.g. maxHeight={350} or numChildrenBeforeScroll={5} using whichever comes first.

Is it possible to implement smooth scroll like in https://github.com/souhe/reactScrollbar?

That component is VERY inneficient and triggers a lot of re-renders, so we are dropping it in place of yours. But my designer would like to have smooth scrolling on some places because we are "emulating" a mobile app.

In the native scrollbar, if you use the mouse wheel or trackpad scroll while the pointer is over the scroll panel's track, that scrolls. This doesn't happen in the component currently.

After upgrading from 3.1.5 to 4.0.0-alpha.18 content within <Scrollbars/> no longer has the size of the container. This squashed a lot of components that were designed to expand to fill the available width, which I worked around by adding:

contentProps={{ style: {'min-width': '100%'} }}

Old ScrollbarsCustom styles: position: relative; display: flex; and flexed children.

New ScrollbarsCustom styles: position: relative; width: 100%; height: 100%; and ScrollbarsCustom-Content styles: display: inline-block; vertical-align: bottom; (losing the height and width).

Thanks for this great library.
I found a small bug with onScrollEnd handling, it looks like component is awaiting "scrollEnd" event but "scrollStop" is actually triggered.
Here are the exact lines:
https://github.com/xobotyi/react-scrollbars-custom/blob/dev-master/src/Scrollbar.tsx#L285
and
https://github.com/xobotyi/react-scrollbars-custom/blob/dev-master/src/Scrollbar.tsx#L966

I've made a PR with fix for that issue #53

Hi man,

Great library! Really excited about v2.

Any chance you add right-to-left support?

I'm trying to achieve the following effect and I think generic RTL support would be the correct way.

Why not set the size of the thumb?

Using 4.0.0-alpha.12
This is roughly what I am doing:

<Scrollbar
  translateContentSizesToHolder={true}
  style={{
    maxWidth: '100%',
    maxHeight: '300px',
  }}
  noScrollX={true}
>
  // test div
  <div style={{width: '100%', height: '300px'}} />
</Scrollbar>

Initially everything looks fine, but if I change the height of the test div to be 100px (for example) the vertical scrollbar disappears as expected but the scroll container retains a 300px height and does not shrink to match the size of its children.

When I inspect what's happening in the browser I notice that the scroll container has a height of 305px, which seems to create a little gap at the bottom. Not sure where that 5px extra is coming from

I created a container div that contains a number of elements wrapped by and has to be scrolled horizontally.

It works fine on google chrome (mobile/laptop), but on safari (laptop + mobile ios12) the horizontal scrollbar starts in the middle which makes the scroll feel off.

In both images, the scroll is at the very left (the start).
Chrome:

Safari:

Clicking on the scrollbar (not the thumb) scrolls to the right position in the container.
Clicking on the srollbar thumb to drag (or on mobile, using finger to scroll) moves weirdly. The scrollbar thumb halves because it seems to think we're in the middle the second I move a bit to the left or right.

On resizing the container when there is no scroll the track and thumb gets hidden but on reverting the thumb still has a "display: 'none'" on it's inline. This happens only in IE, works fine in chrome.

In Scrollbar.addListeners, a passive event listener is added on the scroll event. There is no corresponding call to removeEventListener in Scrollbar.removeListeners. I believe that this will cause duplicate handlers to get attached every time noScroll changes from true to false. Per MDN, this will not cause duplicate listeners (source), but it will cause a slow leak.

How to auto scrolling the scrollbar to bottom when a new item be created at bottom ?

Could I call the instance method scrollToBottom and how ?