Всем привет.
Сделал компонент с горизонтальным скроллом. Не могу правильно навесить классы с тенями.
На данный момент устанавливаю классы так:
if (el.scrollLeftMax <= el.scrollLeft) {
setScrollingPosition('end');
console.log('end');
}
if (el.scrollLeft <= 10) {
setScrollingPosition('start');
// console.log('start');
}
if (scrollingPosition !== 'center') {
setScrollingPosition('center');
}
Проблема в том что, когда я нахожусь либо в самом конце либо в самом начале, классы переключаются
с center на end и наоборот /
с center на start и соответственно наоборот. Происходит это из-за последнего
if, но если его убрать, то тень всегда будет с одной стороны: либо в начале либо в конце.
Полный код:
const Scrollable = ({ children, _class }) => {
const [scrollingPosition, setScrollingPosition] = useState('end');
const ref = useRef();
const classes = cn('search__wrapper', {
'search__wrapper--shadow-start': scrollingPosition !== 'start',
'search__wrapper--shadow-end': scrollingPosition !== 'end',
})
useEffect(() => {
const el = ref.current;
if (el) {
const handleWheel = (e) => {
e.preventDefault();
el.scrollTo({
left: el.scrollLeft + e.deltaY * 3,
behavior: 'smooth',
});
if (el.scrollLeftMax <= el.scrollLeft) {
setScrollingPosition('end');
}
if (el.scrollLeft <= 10) {
setScrollingPosition('start');
}
if (scrollingPosition !== 'center') {
setScrollingPosition('center');
}
};
el.addEventListener('wheel', handleWheel);
return () => el.removeEventListener('wheel', handleWheel);
}
})
return (
<div className={classes}>
<ul className={_class} ref={ref}>
{children}
</ul>
</div>
);
};
