Scroll overflow by js slider animation

import { select, on } from 'lib/dom'
import Tabs from 'lib/tabs'

export default el => {
	// eslint-disable-next-line no-unused-vars
	const tab = Tabs(el)

	const buttonActionEl = select('.js-nav-action', el)
	const sliderEl = select('.js-slider', el)

	if (buttonActionEl) {
		const buttonActionPreEl = select('.pre', buttonActionEl)
		const buttonActionNextEl = select('.next', buttonActionEl)

		if (buttonActionPreEl && sliderEl) {
			on(
				'click',
				e => {
					sliderEl.scrollLeft -= 500
					e.preventDefault()
				},
				buttonActionPreEl
			)
		}

		if (buttonActionNextEl && sliderEl) {
			on(
				'click',
				e => {
					sliderEl.scrollLeft += 500
					e.preventDefault()
				},
				buttonActionNextEl
			)
		}
	}
}

.category-tabs__nav-list {
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	display: block;
	scroll-behavior: smooth;

	&::-webkit-scrollbar {
		height: 0;
	}

	&::-webkit-scrollbar-button {
		height: 0;
	}

	& .category-tabs__nav-item {
		white-space: initial;
	}
}