如何使旋转木马只在光标位于其上时滚动，而不是在窗口上的任何位置

Question

我在应用程序中使用react弹性转盘在四个组件之间垂直滚动，滚动时每个组件都有一些信息。我想做的是，滚动功能应该只在光标位于转盘上时发生，而不是像现在这样在页面上的任何地方都发生。我怎样才能让它成为可能？有什么建议吗？非常感谢。

以下是我迄今为止所做的：

codesandbox.io//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;

App.js:

import React from "react";
import News from "./News";
const App = () => {
return (
<div>
<News />
</div>
);
};
export default App;

Answer 1

您的车轮事件侦听器目前在窗口上，它将侦听窗口上的所有车轮事件。也许你可以在滑块ref上添加监听器，如下所示：

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

你能提供一个代码笔样品吗？测试它会更容易；(