Unable to load additional data - ScrollTop feature malfunctioning

I'm attempting to load data as the page is scrolled, and for this purpose I am using the following function:

$(window).scroll(function ()
    {
      if($(document).height() <= $(window).scrollTop() + $(window).height())
      {
        alert("done")
      }
});

The issue arises when my page setup involves setting body overflow to hidden and having a scrollable container. In this scenario, the code above doesn't work. However, it works fine when I enable body scroll. Can anyone provide suggestions on how to address this problem?

Check out the JSFiddle demo here.

javascriptjqueryhtmlcss

Answer №1

Make sure to target the element with the class scroller instead of window when checking for scroll position.

$('.scroller').scroll(function ()
    {
      if($('.scroller').scrollTop() >= ($('.scroller')[0].scrollHeight - $(window).height()) )
      {
        alert("load more content")
      }
});

JS Fiddle: https://jsfiddle.net/n0rramke/5/

Answer №2

If I have grasped your question correctly, this solution should resolve the issue:

if ($(".scroller").height() <= $(".scroller").scrollTop()) {
  alert("additional data can be loaded")
}

Here is a Fiddle demonstrating the solution: https://jsfiddle.net/rhbmxssv/ ...

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

"Using jQuery to locate an image's title attribute and switch the class of the corresponding list item

I am working on a project that involves a list of images with title attributes and a separate list of names. My goal is to toggle a CSS class on a list item in the name list when hovering over an image. To do this, I need to extract the value of the curr ...

jquery

What is the best way to animate an element when it comes into the user's view

In order to activate the animation of the skill-bars when the element is displayed on the website, I am seeking a solution where scrolling down through the section triggers the animation. Although I have managed to conceptualize and implement the idea with ...

javascripthtmlcssanimation

Assign a value to the cookie based on the input from the form

I recently asked a similar question, but it seems like I missed providing some context, which is why I couldn't get it to work. My goal is to set a cookie value of a form entry when clicking on it (using the carhartl jquery plugin), but nothing happen ...

javascriptjqueryhtmlcookies

What is the best approach for developing an npm package containing multiple Vue directives? Should each directive have its own separate package, or should they

While I have successfully created an npm package by exporting a single vue directive in the src/index.js file, I am now faced with the challenge of creating a package that allows for the use of multiple vue directives. Unfortunately, I have been unable t ...

javascriptvue.jsnpmnpm-publishvue-directives

Potential security concern with Java interpreting JavaScript on the server side

Is there a security risk in evaluating Javascript code submitted from the browser on a server (Java webapp using Rhino Javascript Engine)? The purpose of evaluating the JavaScript is simply to determine its validity. No results are expected from the eval ...

javajavascriptsecurityrhino

What are the steps to create a Node.js application and publish it on a local LAN without using Nodemon?

When working on a Node.js application, I often use the following commands to build and serve it locally: //package.json "build": "react-scripts build", To serve it on my local LAN, I typically use: serve -s build However, I have been wondering how I ...

javascriptnode.jsexpress

Exploring the chosen choice in the Material Design Lite select box

Consider the following scenario. If I want to extract the name of the country chosen using JavaScript, how can this be achieved? <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fullwidth"> ...

javascriptmaterial-design

Learn the process of dynamically expanding a specific Bootstrap menu item using jQuery!

To create a left vertical (sidebar) navigation menu, I will be referencing the "Example" located at https://getbootstrap.com/docs/5.0/components/accordion/. Assuming there are three HTML buttons: <button onclick="myFunction1()">Button 1< ...

htmljquerycssbootstrap-5

Reset a form input using jQuery

There is an ajax method in place that reloads only a specific div upon receiving a service response. success: function (response) { $( "#list" ).load(window.location.href + " #list" ); $( "#badge" ).load(window.location.href + " #badge" ); $ ...

jqueryhtmlajax

explore the route with the help of jquery scrolling feature

Is there a way to implement scrolling functionality for tab headers similar to this demo? I have a list of elements within a div that I need to scroll like the tabs in the demo. I attempted to achieve this by setting the position of the inner elements to ...

javascriptjqueryhtmlcsstabs

Employing v-btn for navigating to a different route depending on whether a specific condition is satisfied

Is there a way to prevent this button from redirecting to the specified URL? I want to implement a validation check in my method, and if it fails, I need to stop this button from performing any action. Any suggestions or assistance would be highly apprec ...

javascriptvue.jsvuejs2vuetify.js

What is the best way to transfer XML file information using AJAX to a Webmethod?

I'm encountering an issue when attempting to send XML via an ajax call to my Webmethod (C# Webforms): Previously, I successfully tested the ajax call with JSON and was able to send JSON to the Webmethod. Although the response status code returns as ...

javascriptc#ajaxwebformswebmethod

Is there a way to eliminate duplicates from an array in JavaScript by utilizing a set and placing each element in an li tag? Here is the code

const numbers = [" 4", "9", "16"," 4", "9", "16"," 4", "9", "16"] <ul> {(<li> {[...new Set(numbers)]} </li>)} </ul> const numbers = [" 4", "9", "16"," 4", "9", "16"," ...

javascripthtmlreactjs

Why does the border-radius property not work on my image elements?

Greetings! I have defined an ID named #img in my stylesheet with the property border-radius: 15px; In my HTML, I assigned this ID to a div. However, the images within that div are not getting rounded corners as expected. When using the img selector, it aff ...

htmlcsscss-selectors

Ways to access information from a SQLite database using Angular

I am a beginner in front-end/back-end communication and I need guidance on how to retrieve data from a SQLite db file to populate a page in my Angular project. I have no idea where to begin, so any resources you can recommend would be greatly appreciated. ...

javascriptangulardatabasesqlite

A different approach for dynamically displaying React components sourced from an API

As I develop a website using Next.js/React that pulls in content from Strapi CMS, my goal is to create a dynamic page template for news articles. The aim is to empower content editors by giving them the flexibility to choose the type of content they wish t ...

javascriptnode.jsreactjsnext.jsswitch-statement

Expanding the Width of Bootstrap 4 Dropdown Button

Currently, I am utilizing Bootstrap 4's dropdown feature. Is there a way to modify the code below so that the dropdown menu that appears upon clicking the button matches the same width as the button itself? It's important to note that the button ...

htmlcssbootstrap-4

Arrange jQuery UI elements in descending order

I need to rearrange a list in descending order, starting from the highest value down to the lowest. The values are currently listed as 10,9,8,7,6,5,4,3,2,1 and I need to update the data-ids accordingly. jQuery('.photos').sortable({ stop: f ...

javascriptjqueryjquery-uishort

Is Node.js categorized as multithreading due to its utilization of worker threads?

Throughout my life, I was under the impression that Node.js and JavaScript operated as a single threaded language. It was always said that Node.js wasn't ideal for CPU intensive tasks due to its single threaded nature. Multithreading, on the other han ...

javascriptnode.jsmultithreading

Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

My current version of Chrome browser (54.0.2840.59) is exhibiting a strange behavior when attempting to print preview an HTML page I have developed. The print preview truncates the page content, displaying less than what should be shown. The content is not ...

htmlcssprintingprint-preview