why here i am not getting scroll event , but click event is firing may be something i am doing wrong-CodePudding

So here is the code and I want to get the scroll event object on the scroll of div which content is a lot so div becomes scrollable how we can get scroll event and why its not working

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;

CodePudding user response：

Your issue is that you're not scrolling your div that you have onScroll on (from your link in the comments, that is the pagesContainer div), but rather, are scrolling your entire body. It's easier to see if you add another element below your onScroll div as you'll see that content shift as you scroll. In the reproducible example you shared, your .pagesContainer div is 500vw, so you need to scroll the container of that div (ie: the body) to see the contents. Instead, you want to keep .pagesContainer the width of your screen (ie: 100vw) but make each page (.pages) within the container of your div span 100% of that width (this can be done by using flex: 0 0 100%;, see here). This way, you will have elements within your pagesContainer div "overflowing" its width. You need to ensure that you add overflow-x: scroll; to the parent to specify that it should add a scrollbar when the content overflows rather than render it outside of the container.

See example below (view browser console for logs):

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>

CodePudding user response：

not sure if you want to make the element itself scrollable or just want the app to console.log the object whenever you scroll the page....

but if you want to console.log the object anyway try to attach an event listener to the document like this ...

note that you need to get the getBoundingClientRect() to know if the screen is on the element you want

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);

this way whenever you scroll the window over the element, the scroll function will work hope it helps you