How to Make a Div Element Visible in the View Using the DOM?

I am working with a large number of div elements (around 4000). The first time the page loads, only the first div is set to have a style of display: block, while all others are hidden with display: none. Additionally, each div has a different height.

<div id="maincontainer">
   <div class="child" style="height:300px;display:block;">page1</div>
   <div class="child" style="height:400px;display:none;">page2</div>
   <div class="child" style="height:200px;display:none;">page2</div>
   <div class="child" style="height:100px;display:none;">page2</div>
   <div class="child" style="height:500px;display:none;">page2</div>
   <div class="child" style="height:600px;display:none;">page2</div>
   <div class="child" style="height:500px;display:none;">page2</div>
   <div class="child" style="height:100px;display:none;">page2</div>
   <div class="child" style="height:400px;display:none;">page2</div>
</div>

I am looking to implement a feature where as the user scrolls down the page, the next div element in view will be displayed. This should continue until the last div element is reached. Can someone provide guidance on how I can achieve this functionality?

javascriptjqueryhtmlcssperformance

Answer №1

If you want to implement infinite scroll functionality, one approach is to add a scroll event listener to the container element. When the user reaches the bottom of the container, you can then load the next set of elements dynamically.

const container = document.querySelector('#maincontainer');

container.addEventListener('scroll', function(e) {
   if (this.scrollHeight - this.scrollTop - this.clientHeight <= 0) {
     // Load next set of elements here
   }
}

You can check out a working example of this implementation, which also works with dynamically added elements, by visiting this link: https://codepen.io/anon/pen/KLJpad

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

What is causing the added assets to not be saved in the hyperledger registry?

I have the application code below in my Hyperledger composer environment (My question pertains only to the RequestT transaction as I have not yet written the Respond transaction code): Data Model Code (.cto) /* * Defines a data model for chama transactio ...

javascriptnode.jspromisehyperledgerhyperledger-composer

Is there a method to run code in the parent class right after the child constructor is called in two ES6 Parent-Child classes?

For instance: class Parent { constructor() {} } class Child { constructor() { super(); someChildCode(); } } I need to run some additional code after the execution of someChildCode(). Although I could insert it directly there, the requirement is not to ...

javascripttypescriptecmascript-6

Revamp the sequence of divs using jQuery

<div class="example first">111</div> <div class="example second">222</div> <div class="example third">333</div> Can the order of these divs be changed using jQuery? I am looking to get: <div class="example second"&g ...

javascriptjqueryhtmlcss

Utilizing $scope in $compile in Angular: A Comprehensive Guide

Attempting to utilize my scope within a compile... I aim for a scenario where upon clicking a button, a div is generated containing the round number. main.controller('fightController', function($scope, $http, Services, $compile) { $scope.d ...

javascriptangularjs

Warning message appears if date input field is left empty upon submission

After implementing angular-ui/ui-date for the date input and angular-auto-validate for form validation, I encountered an issue where the date input field shows a required message before submission. It seems that the problem may be caused by the built-in va ...

jqueryangularjsformsdate

Choose elements in jQuery that lack a specific class

How can I efficiently select all elements with the .hi class that do not include the .image class? <div class="hi"> <div class="hue"> <div class="image"> 456 </div> </div> </d ...

javascriptjqueryclasscss-selectorsjquery-selectors

Copying text from an iframe using HTML and JavaScript

As someone who is relatively new to web development, I am currently attempting to transfer text from an iframe to a textarea located on a Bootstrap-html webpage. You can view an example of the code I am working with here: https://jsfiddle.net/fe5ahoyw/ J ...

javascriptjqueryhtmliframe

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

One issue I'm facing is that the page doesn't auto-refresh, although it loads when I manually refresh it. Below you can find my HTML and AJAX code along with its database details. The Trigger Button <?php $data = mysqli_ ...

javascriptphpjqueryhtmlajax

It is not possible to import node_modules within an electron worker process

Question I'm currently experimenting with using web workers within an Electron application. I have been successful in creating the worker process from the renderer process, but I am encountering a crash when attempting to use require('some_modul ...

javascriptnode.jselectronweb-worker

The webview is in the process of loading, but it is failing

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150"> Your browser does not support the HTML5 canvas tag.</canvas> <script src='https://code.jquery.com/jquery-2.1.3.js'></script> ...

javascriptandroid

Using module.exports and require() in JavaScript for front-end development

Recently, I've been exploring the possibility of utilizing a library like SVGO to clean up SVG code submitted by users directly on the front end. SVGO is primarily designed for node.js on the back end, so wrapping my head around the process of sending ...

javascriptnode.jssvgbrowserify

Video posters can now feature a sleek black border to enhance the

How can I add a black border to a video poster? I've tried to work it out on my own, but I'm having trouble getting it to work. Thank you for any assistance... echo '<video id="video" width="300px" height="200px&q ...

css

Problem with (click) event not triggering in innerHtml content in Angular 4

For some reason, my function isn't triggered when I click the <a... tag. Inside my component, I have the following code: public htmlstr: string; public idUser:number; this.idUser = 1; this.htmlstr = `<a (click)="delete(idUser)">${idUser}&l ...

htmlangulartypescript

Transfer data to ASP.NET MVC using AJAX and FormData

I am working with a simple model: public class MyModel { public string Description { get; set; } public HttpPostedFileBase File {get; set; } } and I have an MVC action for uploading data: [HttpPost] public ActionResult Upload(List<MyModel> d ...

javascriptjqueryajaxasp.net-mvchtml

Using Wordpress for 'Rand' order yields consistent outcomes every time when implemented with ajax

UPDATE: I finally figured out the root of the problem. It turns out that a plugin I installed allows me to organize post ordering in the backend, which was causing the issue with the random order in the AJAX call. Even though I'm requesting a batch o ...

jqueryajaxwordpress

Successfully running npm update on a Mac seemed to have updated the package, however, the

I needed to upgrade my npm version using the following command: npm install npm@latest -g After running the above command, I encountered the following output: /Users/ariful.haque/.npm-global/bin/npm -> /Users/ariful.haque/.npm-global/lib/node_modules ...

javascriptnode.jsnpm

Creating a proper nth-child CSS for multi-level HTML elements involves understanding the structure of the elements

My current project involves a screen where widgets can be dynamically inserted into the DOM. I am looking to adjust the z-index based on the number of times the class decrement-z-index appears. This is the CSS code I have written in an attempt to achieve ...

htmlcss

Retrieve data using a jQuery select query

Is there a way to use a jquery select function to retrieve the email from a users array that contains additional data for each user? var _userObject = linq.From($vw.listVwObservable().Users()); After executing this code, I get an Array[6] where each ele ...

jqueryarrayslinq

What is the best method to substitute a comma and period with just a period in a textarea

Creating a text area with auto-replacing characters like straight quotes, double dashes to em dash, and double spaces to single space was simple. However, I'm facing difficulty in adding a script for replacing certain characters: word . as word. wor ...

javascripthtmlregextextareaentity

Using jQuery to prepend elements and then fade them in

Whenever a user makes a post, it should be displayed at the top of the feed page with a nice fadeIn effect. However, my current script seems to hide all the updates before showing them again. I only want this effect to apply to the latest status. What cou ...

jqueryajax