What are some techniques for managing scrolling within a particular element?

I am currently working with Vue.js and utilizing Element UI components. I want to incorporate a scroll management function to achieve infinite scrolling.

To better understand, please refer to the screenshot in the Example section:

Despite trying different approaches, such as the code snippet below, the infiniteScroll method does not get triggered when scrolling this particular section:

<el-main @scroll="infiniteScroll">......</el-main>

I also attempted another solution by using event listeners for the scroll events but encountered issues because there are multiple scrollable elements on the page (nav/content), and I only want the infiniteScroll method to be called when the content is scrolled:

created: function () {
  window.addEventListener('scroll', this.infiniteScroll);
},
destroyed: function () {
  window.removeEventListener('scroll', this.infiniteScroll);
}

Any suggestions or alternative solutions would be greatly appreciated!

javascriptcssvue.jsscrollelement

Answer №2

One piece of advice shared by Jamie Johnson in the responses is that you must connect the event listener to the specific scrolling element you desire. Here's an example of how to do this:

<scroll-area id="myScrollingElement">......</scroll-area>

document.getElementById('myScrollingElement').addEventListener('scroll', this.scrollHandler);

If this approach doesn't work, it may be due to the implementation of the scrollHandler method.

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

Tips on accessing a function or variable within a script executed using $.getScript

After running a script with $.getScript, is there a way to access the namespace of that script? I expected to be able to do so since the plugin function is defined in the global scope. index.js $.getScript('plugin.js').then((...result) => co ...

javascriptjqueryajaxpromisejavascript-namespaces

Return a string to the client from an express post route

I'm attempting to return a dynamically generated string back to the client from an Express post route. Within the backend, I've set up a post route: router.post('/', async (req, res) => { try { // Here, I perform computations on ...

javascriptexpressnodes

What could be causing Nuxt-link to trigger a page refresh when paired with Bootstrap-vue?

Currently utilizing nuxt and bootstrap to construct a custom hover dropdown menu for navigation. Encountering an issue where my navigation submenu NuxtLinks are triggering a full page refresh instead of smoothly transitioning the app content within my Nuxt ...

vue.jsbootstrap-4nuxt.jsbootstrap-vue

The issue with implementing simple getElementsByClassName JavaScript in the footer of a WordPress site persists

I am facing an issue with a 1-liner JavaScript code in the footer where getElementsByClassName function doesn't seem to work for tweaking style attributes. The text "Hello World" is displaying fine, so I suspect it might be a syntax error? Here' ...

javascripthtmlwordpress

Communication between a directive controller and a service via an HTTP call

I'm currently developing an Angular directive that loads a Highchart.js area graph by passing some variables to it. Here's how I am using the directive: <andamento-fondo-area-chart color="#3FAE2A" url="../data.json"></andamento-fondo-a ...

javascriptangularjshighcharts

HTTP 400 Error: Bad Request Callback

I'm attempting to send data using REST API through jQuery AJAX. Here's the code I am using: $.ajax({ url: 'myurl', type: 'POST', contentType: 'application/json; charset=utf-8', data: JSON.stringify(j ...

javascriptjqueryajaxrestful-url

Encountering a Next.js event type issue within an arrow function

After creating my handleChange() function to handle events from my input, I encountered an error that I'm unsure how to resolve. Shown below is a screenshot of the issue: I am currently working with Next.js. In React, this type of error has not been ...

javascripttypescriptnext.jsevent-handlingarrow-functions

Creating an XML response to generate an HTML dropdown menu in PHP

My onChange function in javascript calls a PHP file to fetch UPS rates and update an HTML dropdown list. Everything was working fine until I needed to add an item to the options list based on a comparison. Javascript: function fetch_UPS(el){ var zip = ...

javascriptphphtmlxmlxslt

Having trouble getting the ValidatorPipe to function properly in my nest.js application

Issue Description There is an issue with the current behavior where initializing a validation pipe for a request body does not reject invalid types as expected. Desired Outcome The expected behavior should be that when a user provides a value that does n ...

javascriptnode.jstypescriptnestjsclass-validator

React component encountering unexpected prop value

In my project, I have a Modal component and a Form component. The Modal is a functional component, while the Form is a class component responsible for handling form submissions. The Modal component passes all of its props to the Form component. Within Mod ...

javascriptreactjsreact-props

Are there any methods to achieve smoother font icons on Firefox?

When it comes to using icons on different browsers, I've noticed an issue. Icons appear sharp on Google Chrome and Opera, but when viewed on Firefox they tend to look blurry if the font-size is less than 20px. Strangely enough, once the font size reac ...

cssfirefoxfontsiconsfont-smoothing

Display a loading message using jQuery Dialog when the page is loading

I have a button that triggers a jQuery Dialog box to open. $( "#dialog" ).dialog({ autoOpen: false, title: 'Contract', height: 450, width:1100, modal:true, resizable: true }); $( ".btnSend" ).click(function() { var id=$(this).a ...

javascriptphpjqueryhtmldialog

The process of handling state in React when it goes live in production

Currently, I am delving into the world of ReactJS as a novice. The intricacies of state management have captivated my interest. A pressing question has surfaced in my mind regarding this topic. Let's consider a scenario - I have developed a React appl ...

javascriptreactjs

Using jQuery to iterate through an array and reverse its order

Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...

javascriptjquerycss

Issue: Module 'curl' is not located at Function.Module._resolveFilename (module.js:489:15)

After installing node.js using the Windows installer, I noticed that the folder structure created was C:\Program Files\nodejs\node_modules\npm\node_modules. It seems like all the module folders are in the last node_modules director ...

javascriptjquerynode.jsnpm

The event was triggered, however, some sections of the code did not run

I am currently working on a project called lan-info on GitHub. Here is the code snippet that I am using: let arpSweepCommand = './arpSweep.sh'; app.get('/arp', (req, res) => { console.log('we have a working signal!'); ...

javascriptjquerynode.jsexpress

Preserving Previous Values in Vuetify Select

Experience a unique way of handling Vueitfy selections with this code snippet: <v-select label="..." autocomplete append-icon="search" :items="plots" item-value="id" item-text="plotHeader" v-model="selectedPlot" v-on:change="loadPlotInforma ...

vue.jsvuetify.js

Incorporate Vuetify's v-stepper seamlessly with Vue router for dynamic functionality

Seeking assistance in integrating vuetify's v-stepper with vue router. Specific requirements include: Assigning each step its own route (e.g. /myform/step1, /myform/step2, /myform/step3, etc) Creating components for each step that are dynamically lo ...

javascriptvue.jsvue-routervuetify.jsv-stepper

Create a recursive CSS style for an angular template and its container

I am struggling with styling CSS inside an ng-container that is used in a tree recursive call to display a tree hierarchy. <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list" [selected]="isSelected"> <sp ...

cssangularrecursiontree

Having trouble with the find method when trying to use it with the transform

In my code, I have three div elements with different values of the transform property assigned to them. I store these elements in a variable using the getElementsByClassName method and then try to find the element where the value of the transform property ...

javascriptcss