Как я могу прокрутить div с помощью колесика мыши, блокируя прокрутку тела?

Question

Я сделал свой div для горизонтальной прокрутки.Но он не прокручивается колесиком мыши.Я попробовал пакет «response-scroll-горизонтальный», но его опция блокировки тела не работала для меня, и у него нет опции колеса.Кроме того, я хочу заблокировать прокрутку тела документа, пока div не будет полностью прокручен до конца.Поэтому я хочу контролировать и знать мое состояние прокрутки div.

handleDivScroll = (e) => {
    const container = document.getElementsByClassName("labels-box");
    console.log(container.scrollTop)
    console.log(container.scrollLeft)
}

<div className="labels-box">
    {this.handleDivScroll}
    <img className="labels" src={LabelImg} alt="" />
    <img className="labels" src={LabelImg} alt="" />
    <img className="labels" src={LabelImg} alt="" />
    <img className="labels" src={LabelImg} alt="" />                              
</div>

это плохо отображает консольное сообщение.

.labels-box {
  min-width: 100%;
  display: flex;
  overflow-x: scroll;
}

это делает прокрутку div горизонтально, но колесо мыши не работает.

Также я попытался

transform: rotate(-90deg); //for .labels-box
transform: rotate(90deg); //for .labels

, но колесо мыши не работало.

Answer 1

Вы можете достичь этого с помощью scrollmagic.Вы можете увидеть библиотеку scrollmagic Here , и у них есть пакет реагирования, который вы можете установить с помощью npm или пряжи Here .Я перенес пример, который я прокомментировал, на github, чтобы вы могли просто загрузить репозиторий и настроить его по своему вкусу Здесь .Основная идея заключается в том, чтобы прикрепить секцию к окну, а затем переместить секцию внутрь по горизонтали при прокрутке до завершения, а затем продолжить обычную прокрутку вниз по сайту.Таким образом, ваш компонент будет выглядеть примерно так:

import React, { useState } from 'react';
import { Controller, Scene } from 'react-scrollmagic';
import { Tween, Timeline } from 'react-gsap';

const SlideContainer = () => {
  const [state] = useState({
    sections: [
      { id: 1, imgSrc: 'https://placehold.it/1920x1080' },
      { id: 2, imgSrc: 'https://placehold.it/1920x1080' },
      { id: 3, imgSrc: 'https://placehold.it/1920x1080' },
      { id: 4, imgSrc: 'https://placehold.it/1920x1080' }
    ]
  });

  const tweenPercentage = 100 - 100 / state.sections.length;

  return (
    <Controller>
      <Scene triggerHook="onLeave" duration={2000} pin>
        {progress => (
          <div className="pin-container" style={styles.pinContainer}>
            <Timeline totalProgress={progress} paused>
              <Tween from={{ x: '0%' }} to={{ x: '-' + tweenPercentage + '%' }}>
                <div
                  className="slide-container"
                  style={{
                    ...styles.slideContainer,
                    width: state.sections.length + '00%'
                  }}
                >
                  {state.sections.map(section => (
                    <div
                      className="panel"
                      key={section.id}
                      style={styles.panel}
                    >
                      <div
                        style={{
                          background: 'url(' + section.imgSrc + ')',
                          backgroundSize: 'cover',
                          backgroundPosition: 'center',
                          width: '100%',
                          height: '100%'
                        }}
                      />
                    </div>
                  ))}
                </div>
              </Tween>
            </Timeline>
          </div>
        )}
      </Scene>
    </Controller>
  );
};

const styles = {
  normalSection: {
    background: '#282c34',
    height: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  pinContainer: {
    height: '100vh',
    width: '100%',
    overflow: 'hidden'
  },
  slideContainer: {
    height: '100%',
    display: 'flex'
  },
  panel: {
    flex: 1,
    padding: '40px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  }
};

export default SlideContainer;

В этом примере я просто циклически перебираю объекты, которые я поместил в состояние, а затем у меня есть несколько уравнений для автоматической установки ширины div, но вы можете настроить еепо своему вкусу довольно легко.Разместите div внутри .slide-container и убедитесь, что вы установили ширину контейнеров для слайдов по своему вкусу.Если у вас есть какие-либо вопросы, дайте мне знать.