У меня есть компонент, который изменяется в горизонтальный ряд загрузочных карт, когда в меньшем окне рабочего стола. Для пользователей без горизонтального колесика мыши и без сенсорной панели я бы хотел, чтобы пользователи могли прокручивать по горизонтали, используя вертикальные движения колесика мыши при наведении курсора на этот конкретный компонент.
Вот исходная проблема StackOverflow, на которой я основал свой код:
https://stackoverflow.com/a/15343916/8387497
Компонент вспомогательной горизонтальной прокрутки:
function horizontalScroll (event) {
const delta = Math.max(-1, Math.min(1, (event.nativeEvent.wheelDelta || -event.nativeEvent.detail)))
event.currentTarget.scrollLeft -= (delta * 10)
event.preventDefault
}
Как я реализовал это для компонента, требующего горизонтальной прокрутки:
<Row className='announcements-home' onWheel={horizontalScroll} >
Когда я поместил эту вспомогательную функцию horizontalScroll в событие React onWheel, она прокручивается по горизонтали и вертикали. Мой желаемый результат - просто горизонтальная прокрутка. Кроме того, Firefox вообще не реагирует на горизонтальную прокрутку с этими изменениями.