0

我在我的应用程序中使用 react-elastic-carousel 在四个组件之间垂直滚动，并且每个组件在滚动时都有一些信息要显示。我想要做的是滚动功能应该只在光标在轮播上时才会发生，而不是像现在正在发生的页面上的任何地方。我怎样才能使任何建议成为可能？非常感谢。

这是我到目前为止所做的：

codeandbox.io/s/compassionate-leftpad-zzueys?file=/src/App.js

新闻.js：

    import React, {useEffect, useRef } from "react";
    import Carousel from "react-elastic-carousel";
    import "./ news.css";
    import {
      Center,
      Areas,
      Place,
      Others,
    } from "./Contents";
    
    const News = () => {
    
      useEffect(() => {
        document.title = "News";
      });
    
      const prevItemObject = "prev";
      const nextItemObject = "next";
    
      const slider = useRef(null);
    
      function scroll(e) {
        if (slider === null) return 0;
    
        e.wheelDelta > 0
          ? slider.current.onNextStart(prevItemObject, nextItemObject)
          : slider.current.onPrevStart();
      }
    
      useEffect(() => {
        window.addEventListener("wheel", scroll, true);
    
        return () => {
          window.removeEventListener("wheel", scroll, false);
        };
      }, []);
    
      return (
        <div className="container">
          <Carousel
            onScroll={scroll}
            verticalMode
            itemsToShow={1}
            enableSwipe={true}
            ref={slider}
          >
            <Relevant />
            <SearchByAreas />
            <FindAPlaceToLive />
            <FindTheRightRoomie />
          </Carousel>
        </div>
      );
    };
    
    export default News;

应用程序.js：

import React from "react";
import News from "./News";

const App = () => {
  return (
    <div>
      <News />
    </div>
  );
};
export default App;
4

1 回答 1

0

您的滚轮事件侦听器现在在窗口上，它将侦听窗口上的所有滚轮事件。也许您可以像这样在滑块引用上添加侦听器：

slider.current.addEventListener("wheel", scroll, true);

你能提供一个codepen样本吗？测试它会更容易;)

于 2022-03-02T08:36:15.283 回答