为什么在这里我没有滚动活动，而点击事件可能是我做错的事情

Question

因此，这是代码，我想将滚动事件对象放在div的滚动中，其中的内容很大，因此DIV变得可以滚动我们如何获得滚动事件，以及为什么它不起作用

import React from "react";

function App() {
  return (
    <div onScroll={(e) => console.log(e)}>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, facilis
      magni d.......
      ...............
      vero!
    </div>
  );
}

export default App;

Answer 1

您的问题是，您不是在滚动div，即onscroll on（从注释中的链接中，即pagesContainer div），而是滚动你的整个身体。查看是否在onScroll div下方添加另一个元素，因为您会在滚动时看到内容变化。在您共享的可重现示例中，您的.pagesContainer div为500VW，因此您需要滚动该Div（即：正文）的容器才能查看内容。相反，您要保留.pagesContainer屏幕的宽度（即：100VW），但将每个页面（.pages）放在容器中该宽度的Div Span 100％（可以使用flex：0 0 100％;，请参见在这里）。这样，您将在pagesContainer div“溢出”其宽度中具有元素。您需要确保向父添加Overflow-x：scroll;，以指定当内容溢出而不是在容器之外渲染时，应添加滚动条。

请参阅下面的示例（查看日志浏览器控制台）：

function App() {
  return (
    <div className="pagesContainer" onScroll={(e) => console.log("scroll")}>
      <div className="pages">page1</div>
      <div className="pages">page2</div>
      <div className="pages">page3</div>
      <div className="pages">page4</div>
      <div className="pages">page5</div>
    </div>
  );
}

ReactDOM.render(<App />, document.body);

body {
  margin: 0; /* just to remove whitespace padding */
}
.pagesContainer {
  display: flex;
  width: 100vw; /* change to 100vw*/
  overflow-x: scroll; /* important to specify scrolling behaviour when the content overflows */
}

.pages {
  flex: 0 0 100%; /* make each page 100% of the container */
  height: 100vh;
}
.pages:nth-child(even) {
  background-color: rgb(225, 143, 143);
}
.pages:nth-child(odd) {
  background-color: rgb(130, 130, 215);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Answer 2

不确定您是要使元素本身滚动或只想让应用程序机。每当您滚动页面时log对象....

但是，如果您想安装对象。这样的文档...

请注意，您需要获取getBoundingClientRect（）才能知道屏幕是否在元素上您想要的元素，

function scroll() {
const element = document.querySelector("div")
const rect = element.getBoundingClientRect()
if( rect.top <= 200 )//any number above 100 will work
       {console.log("scrolled")}
}
document.addEventListener('scroll', scroll);

每当您在元素上滚动窗口时，滚动函数都会工作
希望它能帮助您