Как добавить скролл по горизонтали на блок?

Question

[Диас Галымбек]

1. Чтобы при наведении на блок остановился скролл по вертикали у body.
2. При наведении на блока можно было его скролит по горизонтали.

Использовал и не помогли.
1. whell и deltaY, вещал события на блок.

Простейший код, но никак не смогу сделать.
Мне главное получить значение скролл по Y когда курсор находится на div-е.

Вот действующий код -->>

const MiniSlider = () => {
    const lineRef = useRef();

    useEffect(() => {
        lineRef.current.addEventListener("whell", (e) => {});
    }, []);

    return (
        <div className="mini-slider container">
            <div className="mini-slider__header">
                <h3 className="mini-slider__title">Upcoming Videos</h3>
                <a className="mini-slider__link" href="#">
                    Show More
                </a>
            </div>

            <div ref={lineRef} className="mini-slider__line">
                {games.map((game) => (
                    <Card key={game.id} item={game} />
                ))}
            </div>
        </div>
    );
};

Comments

[szQocks]

1. Чтобы при наведении на блок остановился скролл по вертикали у body.

- при наведении мышки на блок который должен скролиться по оси X - запоминаешь позицию скролла по Y у body и заносишь куда-то в переменную, назовём её positionScrollBodyY

и при событии wheel - проверяешь при помощи wheelDelta - куда крутит колёсико пользователь, и скролишь блок в нужную сторону, влево или вправо и так как в этом момент при прокрутке колёсика body тоже будет скролиться, что бы этого избежать своего рода заблокировать - скроллишь заодно и body тоже на позицию его последнюю , то есть на позицию переменной positionScrollBodyY

возможно я что-то и не учёл, но в целом думаю я описал более менее рабочую схему, пробуй
( остальную логику я рассчёт не брал, с проверкой доскроливания блока по оси X и т.д )

[imko]

szQocks,

скроллишь заодно и body тоже на позицию его последнюю

дергаться будет, и чем слабее железка или чем больше нагрузка от чего-то еще тем сильнее это будет заметно, скролл у боди надо в принципе блочить

[szQocks]

imko, а у меня нет других идей, о том как заблокировать скролл основной кроме как скроллить его на одну позицию. Стилями не вариант блочить, потому что я предполагаю что основной скролл должен быть видимым. У тебя есть идеи ?

[imko]

szQocks, классика для такого блока это стики-слайдер в гигантском по высоте пустом блоке, скролл страницы идет сам по себе, а на каждые ну допустим 300 пикселей прокрутки страницы листается слайд, обертка рассчитывается соответственно 300 * количство слайдов. Это еще и работает нормально с якорями теми же. Частый вопрос в последнее время)

[szQocks]

imko, звучит потно но я бы посмотрел на эту реализацию, я ща проверил и вообще если у блока есть скролл, и отслеживать wheel событие то и основной скролл блочить не нужно будет, значит мой план который был написан выше - дерьмо https://codepen.io/kapysta-xxl/pen/PoXvrzJ

[Диас Галымбек]

szQocks, Прекрасно работает ))