The onScroll event is failing to trigger when scrolling to a particular div on Next.js

Is there a way to fetch data when a specific div comes into view on a SSR page in Next.js? I attempted using the onScroll event on the div, but it doesn't seem to be triggering. Any suggestions?

function handleScroll() {
    console.log("scrolled to element")
}

<section onScroll={handleScroll} className={`${styles.notifTop} marginTop2 container`}>
  <p className={styles.notifTitle}>Taking actions over words!</p>
  <p className={`${styles.notifParagraph}`}>The accumulation of <span className="fontWeight400">small individual actions</span> will help accomplish the <span className="fontWeight400">large collective challenges</span> that we can no longer ignore.</p>
</section>

javascriptnext.jsscroll

Answer №1

function detectScroll() {
    console.log("element has been scrolled to")
}
div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
<div onScroll="detectScroll()" className={`${styles.notifTop} marginTop2 container`>
  <p className={styles.notifTitle}>Taking actions over words!</p>
  <p className={`${styles.notifParagraph}`>The sum of <span className="fontWeight400">small individual actions</span> will allow us to accomplish the <span className="fontWeight400">great collective challenges</span> that we can no longer ignore.</p>
</div>

Instead of using a section tag, make sure to use a div tag and the onScroll event works correctly as shown in the code above.

function detectScroll() {
    console.log("element has been scrolled to")
}

<div onScroll={detectScroll} className={`${styles.notifTop} marginTop2 container`>
  <p className={styles.notifTitle}>Taking actions over words!</p>
  <p className={`${styles.notifParagraph}`>The sum of <span className="fontWeight400">small individual actions</span> will allow us to accomplish the <span className="fontWeight400">great collective challenges</span> that we can no longer ignore.</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Limit the ng-repeat results based on search input using a transformation filter

I am currently working with an array of records that are being displayed in an HTML table with filters in the header. However, I have encountered an issue where some values are transformed by filters, causing the ng-repeat filter to fail. <table class= ...

javascriptangularjsangularjs-ng-repeatangularjs-filter

React is unable to identify the `isDisabled` attribute on a DOM element within an img tag

After updating my React/Next.js App, I encountered the following issue: Upon investigation, React is indicating that the isDisabled prop is not recognized on a DOM element. To resolve this, you can either specify it as lowercase isdisabled if you want it ...

javascriptreactjsnext.js

Having trouble making JSON work alongside Ajax and jQuery?

In my JavaScript, I have the following code snippet... $.ajax({ type: 'POST', url: 'http://www.example.com/ajax', data: {email: val}, success: function(response) { alert(response); } }); The PHP fil ...

javascriptjqueryajaxjson

Troubleshooting: CSS Styles not loading when passed as property in MUI withStyles

I am currently working on a react component that has a specific style defined as shown below: const StyledInnerItem = withStyles((theme) => ({ bgColor: { backgroundColor: (props) => { console.log('styledInnerItem color: ', props ...

javascriptcssreactjsmaterial-ui

Populate Vue 3 Element-plus Virtualized Table with actual data

As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example: const generateColumns = (length = 10, prefix = 'column-', props?: any) => ...

javascriptarraysvue.jselement-plus

Methods for concealing the title and date when printing web content using JavaScript

When utilizing the window.print method to print out a specific screen, I encountered an issue. I need to hide the date in the top left corner of the image as well as the title (not the big heading) which has been intentionally blurred. I've come acro ...

javascriptcssvue.js

Is it possible to update the event parameters with every click?

Is there a way to dynamically add a Select box for selecting a condition each time the "add" button is clicked? For example, when the add button is clicked, I would like the following elements to be continuously added: https://i.stack.imgur.com/6bad2.png ...

javascripthtmlgoogle-apps-scriptgoogle-sheetsevent-handling

What is the best way to determine the width and height of text within a TextArea using JavaScript in an HTML document

Imagine this scenario: https://i.stack.imgur.com/cliKE.png I am looking to determine the size of the red box within the textarea. Specifically, I want to measure the dimensions of the text itself, not the dimensions of the entire textarea. The HTML code ...

javascripthtmlangular

How to adjust the duration of color mode transitions in Chakra-UI?

Currently, when I switch between dark and light color modes using a toggle button, the background of the page smoothly blends into the new color over approximately 0.2 seconds, while all other colors change instantly. I am looking to either set a defined t ...

reactjsnext.jschakra-ui

Loop through a collection of items based on the values in a separate array using jQuery

I have a list of objects below The newlist and SelectID array are both dynamic. I am populating through a function, now I need to iterate and create the new list. var newList = [ { id : 1,name="tea",plant:"darjeeling"}, { id : 2,name="cof ...

javascriptjquery

What is the best way to decrease the border width of a chartjs doughnut chart?

I have a vision for my chart based on the mockup: However, here is what I've been able to achieve using chartjs so far: This is the code I'm working with: datasets: [ { data: [3, 8, 13, 9, 2], backgroun ...

javascriptreactjschart.jsdonut-chartreact-chartjs

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript

I have been attempting to incorporate a fade animation using CSS when altering the class of the input and label elements within a form by utilizing the classList.toggle method in JavaScript. I'm puzzled as to why my code isn't producing the desir ...

javascripthtmlcssdomcss-animations

the mobile website is not properly aligned on a horizontal axis

As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...

javascripthtmlcssmobileweb

Sorting feature fails to function properly when used in combination with pagination and

<table> <thead> <tr> <th class="col-md-3" ng-click="sortDirection = !sortDirection">Creation Date</th> </tr> </thead> <tbody> <tr dir-paginate="item in items | filter:itemFilter | items ...

javascripthtmlangularjspaginationangularjs-orderby

Setting global variable values when a button is clicked in Javascript

My query involves JavaScript. I have an HTML template with a button (b1) that, when clicked, assigns an array to a variable called tempdata. The issue arises when trying to display this tempdata array using alert() outside the onclick function; nothing hap ...

javascript

Preventing Users from Accessing NodeJS Express Routes: A Guide

Currently, I am working on a React application where I am utilizing Express to handle database queries and other functions. When trying to retrieve data for a specific user through the express routes like so: app.get("/u/:id", function(req, res) { ...

javascriptnode.jsreactjsexpress

Enable row selection in UI-Grid by clicking on a checkbox with AngularJS

I am a newcomer to angular js and I am looking to have the checkbox automatically selected when clicking on a row to edit that specific cell. I have implemented a cell template to display the checkbox in the UI-grid, but now, when I select a row, the row i ...

javascripthtmlangularjscheckbox

AngularJS - sorting JSON data based on key values

I am working with a JSON data set that I need to filter based on the selected option value. The select input is bound to an ng-model, but for some reason, the filter isn't functioning properly. Can anyone spot what mistake I might be making? This is ...

javascriptangularjsjsonangularjs-filter

Issue: [ng:areq] The argument 'HelloController' is not defined as a function, it is displayed as undefined

Struggling to integrate Angular with Django has been quite a challenge for me. After finally managing to make it work, I encountered yet another error. Each time I load the application, the following error message pops up: Error: [ng:areq] Argument ' ...

javascriptangularjsdjangoangular-controller

The folder serves as a module, however, the index.js file within the folder only consists of a few require

Currently, I am delving into the source code of hexo, a project built on top of node.js. Specifically, I came across a file named init.js: if (results.config){ require('./plugins/tag'); require('./plugins/deployer'); require('./pl ...

javascriptnode.js