如何使旋转木马滚动仅当光标在它上，而不是在窗口上的任何地方？

Question

我在应用程序中使用反应弹性旋转木马在四个组件之间垂直滚动，每个组件在滚动时都有一些信息可以显示。我想要做的是，只有当光标在旋转木马上时，滚动功能才会出现，而不是像现在这样出现在页面上的任何地方。我怎么能让你有什么建议呢？非常感谢。

以下是我迄今所做的工作：

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

News.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;

App.js:

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

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

Answer 1

您的车轮事件监听器现在处于窗口中，它将侦听窗口上的所有车轮事件。也许您可以将侦听器添加到滑块引用中，如下所示：

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

你能提供一个密码样本吗？它将更容易测试;)