Support horizontal scrollbar?

[thovo]

Thank you a lot for the component! It worked pretty nice.

Situation: I am using overflow-x: auto to display a horizontal scrollbar for Tabs component of react-toolbox. I want to use react-custom-scrollbar for the nav part of Tabs component.

I want to know there is any support for horizontal scrolling now and if it has, how to implement it?

I tried to look at the documentation and around issues discussion but I didn't find any example using it. I am extremely grateful if you can show me how to do it.

[malte-wessel]

You'll need to make the Scrollbars' child components wider than the Scrollbars component itself. This can be done with a fixed width on the child components.

[thovo]

The problem is usually we don't know the available width of child component as the data would be very random.

[malte-wessel]

Maybe you could force the tabs to overflow with the help of css. If you got inline-block elements you could set white-space: nowrap; on the tabs container element, to ensure that the container grows horizontally.

[thovo]

Yes, I am doing it now, I force the nav inside Tabs have overflow-x: auto so it will add a horizontal scrollbar now if it is too long. The problem is wrap the whole Tabs component inside Scrollbars didn't render the nice scroll but always the default scrollbar of browser which is a little ugly.

An example is below:

[janejanejane]

I don't understand how this is used to show the horizontal scrollbar. Can you please show how? I also want to have this.

[thovo]

@janejanejane : it didn't show yet and currently I don't know how, to enable the horizontal scrollbar you just need to add style overflow-x: auto to the element you want.

[ghost]

@thovo

React file : <CustomScrollBars autoHide={false} style={{ width: "100%", height: "48px" }} renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>} renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}> </CustomScrollBars>

CSS file : .track-horizontal { min-width: 100%; z-index: 150; bottom: 0; } .thumb-horizontal { cursor: pointer; background: red; min-width: 100px; }

If test is ok remove in .thumb-horizonta -> min-width: 100px;

[ignu]

I tried that in a codesandbox and it looks like it's being covered up by native scrollbars?

https://codesandbox.io/s/nZm4PKxPp

cc: @WonderStudio

[CaptainN]

You can use something like react-measure to get the width of the container, and use that width to set the width of the scroll bar.

  handleResize = (rect) => {
    this.setState({
      dimensions: rect.bounds
    })
  }

  ...

  <Measure bounds onResize={this.handleResize}>
    {({measureRef}) => <div ref={measureRef} className="chooser-objects"
      onWheel={this.handleWheel}>
      <Scrollbars universal style={{ width: this.state.dimensions.width, height: this.state.dimensions.height }}>

The real challenge is getting it to convert vertical scroll motion to horizontal, for mouse wheels. @

[MuYunyun]

Can it support to show the vertical and the horizontal scrollbar at the same time?

[HUGY1]

i have done it. using css become horizontal scrollbar. and use onWheel eventlistener to scroll by mousewheel. looks good.