The locomotive scroll elements mysteriously vanish as you scroll, leaving the footer abruptly cut off

After successfully implementing locomotive scroll on my website, I encountered some issues when uploading it to a live server. Elements started bumping into each other causing flickering and disappearing, with the footer being cut off as well. It appears that the positioning of elements is not updating correctly during scrolling, leading to this glitch.

I suspect that this could be a loading issue, as sometimes everything works fine and resizing the browser can temporarily fix the problem. Perhaps I need to trigger an update() on the scroll after all elements have loaded.

I'm exploring ways to modify the code snippet below so that it verifies if the page's DOM has fully loaded instead of relying on a timeout function for the check.

function smooth() {
    let scrollContainer = document.querySelector('your-selector');
    scroll = new LocomotiveScroll({
        el: scrollContainer,
        smooth: true
    });

   setTimeout(() => {
      scroll.update();
   }, 500); 
}

Answer №1

A common issue causing this problem is the delay in loading images, but don't worry, there's a simple solution to fix it. Just make sure to call update() when scrolling once all elements have finished loading.

If you want to check whether all images have loaded or not, you can use imageLoaded. After confirming that all images are loaded, remember to update the scroll for smooth functionality.

 const imagesLoaded = require("imagesloaded"); // You can import the library or use CDN


  let scrollContainer = document.querySelector("[data-scroll-container]");

  var scroll;

  scroll = new LocomotiveScroll({
    el: scrollContainer,
    smooth: true,
   });




  /* Update the scroll height once all images are loaded */

  imagesLoaded(scrollContainer, { background: true }, function () {
    scroll.update();
  });

Answer №2

By utilizing IntersectionObserver, you can ensure that the scroll is updated as soon as the document reaches its full height.

      (function () {
        const scrolling = new LocomotiveScroll({
          el: document.querySelector("[data-scroll-container]"),
          smooth: true,
          smoothMobile: false,
        });
        new ResizeObserver(() => scrolling.update()).observe(
          document.querySelector("[data-scroll-container]")
        );
      })();

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

Obtain image URL from object properties using AngularJS

Just starting out with Angular JS and I have a question. I'm currently working on a project and I have a solution in mind, but I was wondering if there's a more "angular-esque" approach that I could take. The idea is for each videoid, there wou ...

Guide to Increasing Table Index within Nested Loop in Vue.js 3

How can I increment table indices within a nested loop in Vue.js 3? I am currently working with two-level deep arrays using Vue.js, and I need an index that starts at 1 and increases for each item in the top-level array. The desired output is as follows: ...

Using Bootstrap's nav-pills inside a table

Is there a way to incorporate Bootstrap Nav Pills into a table, with the "tab buttons" located in the last row of the table? I've attempted it but it doesn't seem to be functioning correctly. Check out this link for reference <table clas ...

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...

Using JavaScript requests to save XML data and PHP to read and process the XML data stored in MySQL

I have encountered an issue while trying to save XML content, received as plain text, into my site's database. I came across advice suggesting not to store XML in a text field but instead use a blob. So, I proceeded to save it as a blob using CORS and ...

What are the risks and drawbacks of revealing your environment variables to the browser in NextJS?

Currently in the process of setting up Firebase v9 authentication within a NextJS application I am developing. Initially, I attempted to utilize Next's server-side environmental variables for my Firebase configuration but encountered issues with all e ...

Modifying the CSS based on the SQL data retrieved

I'm currently diving into the world of php and jquery, attempting to build a webpage that displays player information and their status fetched from my Mysql server. Although the core code is functional, it's a mashup of snippets gathered from va ...

Automatically insert content into a div following the execution of an AJAX delete function using jQuery

I've been working on a feature to display an auto-populated message in the results div when a user deletes the last item from their favorites list, indicating that it is empty. However, I've hit a roadblock and can't seem to make it work. H ...

Node.js's module-only scope concept allows variables and functions defined within

Currently, I am attempting to create a function that can set a variable at the top-level scope of a module without it leaking into the global scope. Initially, I believed that implicit variable declarations within a module would remain confined to the modu ...

Assign a CSS class to a DIV depending on the vertical position of the cursor

The website I am currently developing is located at Within the site, there is a collection of project titles. When hovering over a project title, the featured image is displayed directly below it. I would like to change the positioning of these images to ...

Javascript: Dynamically Altering Images and Text

One feature on my website is a translation script. However, I'm struggling to activate it and update the image and text based on the selected language. This is the code snippet I am currently using: <div class="btn-group"> <button type ...

Verifying the presence of a cookie when the page loads

My goal is to have the browser initially check for a cookie named "yes." If this cookie exists, I would like to show a message. If not, I want to display the following: <input type="button" id='approve' value="approve" onclick="a()"/> &l ...

Using AngularJS and JavaScript, set the Submit button to be enabled only when the email input is valid and a value is selected in

I'm trying to create a form that includes an email input field and a drop-down list sourced from a database array. Initially, the submit button is disabled when the form loads. My goal is to figure out how to activate the submit button only when the ...

What is the best way to trigger ajax when the user clicks the back button to return to the previous webpage?

Check out my code snippet below: HTML Code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="body"> <div class="dropdown_div"> <select id="q_type" class="dropdown" ...

What is the reason for placing a ReactJS component, defined as a function, within tags when using the ReactDom.render() method?

As someone who is brand new to ReactJS and JavaScript, I am struggling to grasp the syntax. The component I have created is very basic: import React from 'react' import ReactDom from 'react-dom' function Greetings() { return <h1&g ...

Checkbox inputs with activated labels causing double events to fire

Creating round checkboxes with tick marks dynamically and appending them to id="demo" on the click of two buttons that invoke the get(data) method is my current goal. The issue arises when both buttons are clicked simultaneously, as the checkboxes do not ...

React JS server conditional response malfunctioning

I've been facing issues with receiving a conditional response from an Express server for a React application. Check out the server-side code below: app.get('/api/checklogin', (req, res) => { var val = req.session.user ? false : tru ...

Using JSON.parse in Node.js to manipulate arrays with Javascript

While taking an online course, I came across a confusing code snippet: notes = JSON.parse(notesString). The confusion arises from the fact that this code is supposed to result in an object, but it's being treated as an array. Isn't JSON.parse sup ...

Utilize anychart.js to define the axis using JSON data

I'm relatively new to using anychart js and encountering some obstacles. I have a json file that is being fetched from an API, containing data on NBA players' statistics. You can find the json file here: My goal is to display the date data on th ...

What is the process for displaying all indexes of a Mongo Collection using MongoDB Node native?

I am curious about how to retrieve all indexes from a specific collection in mongodb. I've tried using listIndexes, indexes, and indexInformation, but these methods only return empty values (arrays and objects). However, when I run db.getCollection(&a ...