Horizontal scrolling with wheel

[elinake]

Using a mouse wheel works only on vertical scrolling. When scroll list is horizontal, scrolling works only by dragging and clicking the bar.

[leonardobaggio]

I'm looking for something exactly like you described. Did you found a workaround for this?

[elinake]

Yes, you can bind regular onWheel event to your scrollbar and then use it like this:

_onMouseWheel: function(event) { if (this.props.direction === 'horizontal') { var list = event.currentTarget.firstChild; var delta = (event.deltaX == 0 ? event.deltaY : event.deltaX); list.scrollLeft += delta; event.preventDefault(); } }, Normally you use deltaY, and deltaX check is for mac trackpad.

I am using this: https://www.npmjs.com/package/normalize-wheel for fixing cross-browser issues.

[StipJey]

I use

onMouseWheel(e) {
	const currentScrollDelta = this.scrollBars.getScrollLeft();
	this.scrollBars.scrollLeft(currentScrollDelta + e.deltaY);
}

[oplengs001]

I use

onMouseWheel(e) {
	const currentScrollDelta = this.scrollBars.getScrollLeft();
	this.scrollBars.scrollLeft(currentScrollDelta + e.deltaY);
}

awesome solve my problem :) thanks

[seanbelverstone]

Hey i know I'm 4 years late to this thread, but do y'all have any ideas on how this works with the current version? It doesn't look like react-custom-scrollbars uses the onMouseWheel property anymore. Here's my current scrollbar setup:

<Scrollbars
	ref={scrollBars}
	style={{ width: '100%', height: 500 }}
	renderTrackHorizontal={props => <div {...props} className='track-horizontal'></div>}
	renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
	onScrollFrame={(values) => setScrollPosition(values.left)}
>