Блог

Я сделал так, чтобы мой div прокручивался по горизонтали. Но он не прокручивается с помощью колеса мыши. Я попробовал пакет ‘react-scroll-horizontal’, но его опция блокировки тела у меня не работала, и у него нет опции колеса. Кроме того, я хочу заблокировать прокрутку основного текста документа до тех пор, пока 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
  

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

Вы можете достичь этого с помощью scrollmagic. Вы можете увидеть библиотеку scrollmagic здесь, и у них есть пакет react, который вы можете установить с помощью npm или yarn Здесь. Я отправил пример, который я прокомментировал, на 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, но вы можете довольно легко настроить его по своему вкусу. Поместите divs внутри .slide-container и убедитесь, что вы установили ширину контейнеров слайдов по своему вкусу. Если у вас есть какие-либо вопросы, дайте мне знать.