Ways to eliminate / refresh locomotive scroll when resizing the window?

I am currently working on a website that is designed with a horizontal layout for desktop screens, but switches to a vertical layout for smaller screens. I have implemented locomotive scroll successfully, but I am facing issues with window resizing.

Below is the code snippet for large screens:

 const lscroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    direction: 'horizontal'
});

During window resize events, when the width falls below the mobile threshold, I attempted to destroy and initialize it again with a vertical direction instead of horizontal:

 const lscroll = new LocomotiveScroll({
   el: document.querySelector('[data-scroll-container]'),
   smooth: true,
   direction: 'vertical'
 });
 lscroll.destroy();
 lscroll.init();

Any suggestions or solutions are welcome!

javascripthtmljquerycsslocomotive-scroll

Answer №1

My experience with LocomotiveScroll is limited, but the sample code you shared is quite unusual.

In your code, you initialize a vertical LS instance and then destroy it, only to initialize it again later.

You may want to consider implementing something like this instead:

let lscroll = new LocomotiveScroll(...);

const handleResize = () => {
  const desiredType = ... // 'horizontal' or 'vertical'
  if (lscroll.direction !=== desiredType) {
    lscroll.destroy()
    lscroll = new LocomotiveScroll(...);
  }
}

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

Guide on how to perform a POST request within a service worker?

I am faced with the challenge of sending a POST request to the back-end every time a client clicks on a Push notification from the front-end, in order to confirm that the client has received the notification. Here is the system I currently have in place f ...

javascriptnode.jsvue.jspostworkbox

Initiating, halting, and rejuvenating a timer in JavaScript

Here is a simple code snippet where I'm experimenting with starting, stopping, and resetting a JavaScript timer. The goal is to have a timer running on a page that sends a message once it reaches the end of its countdown before restarting. The stop b ...

javascript

What is the method of instantiating a Selenium WebDriver instance in Node.js without initializing the browser?

Is there a way to create an instance of the selenium webdriver without launching a new browser every time? I want to keep the driver in a common place and prevent a new browser from opening with each call. The code below shows how I am currently creating a ...

javascriptnode.jsselenium-webdriver

What might be the root of this layout problem?

After creating the maximum of 5 entries, the layout appears as intended and looks like this: However, when there are fewer entries, the layout becomes disorganized: What could be causing this issue? The PHP code responsible for generating each entry is a ...

phpcss

A guide on integrating mat-select into Angular input fields

I've been trying to implement a mat-select dropdown on my input field, but for some reason, when I click on the arrow, nothing happens and the list doesn't show up. Usually, with autocomplete, when a user starts typing, all the options are displ ...

htmlcssangularangular-materialhtml-select

The inability to read property 0 of undefined persists despite implementing conditional rendering

I'm struggling to understand what mistake I'm making in the current situation: There's an array named arrayOfChildren that gets initialized like this: const [arrayOfChildren, setArrayOfChildren] = React.useState([]) With a handler function ...

javascriptreactjs

Error in INSERT INTO statement

There seems to be an issue with my insert into line, specifically this part mysql_query("INSERT INTO accounts('username', 'password', 'firstname', 'lastname', 'email') VALUES($username, $password, $firstn ...

phphtmlmysqlinsert

Surprising occurrence of page scrolling upward upon clicking a link

I crafted a web page in HTML specifically designed for viewing on an iPad. The layout features an FAQ list with a hover effect applied to each question. In order to trigger the hover effect on the iPad, I had to include a dummy link similar to this: <a ...

htmlhyperlink

Just built a React App including a blog functionality, but for some reason the blog posts are not showing up. Any suggestions on how to fix this issue

I'm currently working on a project that involves creating a blog page for our react app. Despite my efforts, I am facing difficulty in getting the blog posts to show up. In order to retrieve all the posts from my MYSQL database, I have set up an API ...

javascripthtmlnode.jsreactjsexpress

What is the process for setting the input text direction to right-to-left in jQuery mobile?

When using jQuery mobile, I included an input text field: <input type="text" data-clear-btn="true" id="txt_name_contractor"> In my CSS file, I specified the following properties: direction: rtl; text-align: right; However, when typing in this inp ...

jqueryjquery-mobile

Caution: PHP's move_uploaded_file() function is unable to successfully relocate the audio file

I've implemented a straightforward Record Wave script using Recorder.js Encountering an Issue Recording works fine Playback of my recording is successful Downloading the recorded file from blob works smoothly The problem arises when trying to uploa ...

javascriptphpajax

What is causing the modal to fail to open when the button is clicked?

My HTML includes a modal that isn't functioning correctly. <!doctype html> <html lang="en"> <head> <title>Rooms</title> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlbootstrap-5

Error: Unexpected error occurred due to the absence of the defined variable `$`

Why is it that everything seems to be working fine in homecooked.js, but the script below it is causing a "ReferenceError: $ is not defined" in the browser? <script src="assets/jquery-1.8.2.min.js" type="text/javascript"></script> <sc ...

jquery

Anomalies observed in label transition while in active state for input field

Can you explain why there is a gap in the label when it's positioned at left:0? I'm aiming to achieve a UI similar to Material design but struggling with label positioning. I've experimented with using translateY(-6px), however, this method ...

htmlcsstransition

Explore how Next.js's getServerSideProps feature incorporates loading animations and improves

I have implemented getServerSideProps in my project's pages/post/index.js file: import React from "react"; import Layout from "../../components/Layout"; function Post({ post }) { console.log("in render", post); return ( <Layout title={pos ...

javascriptreactjsnext.js

Is it possible for AngularJS to automatically update a view when a persistent model (stored in a server database) is altered by an external application?

I'm just beginning to explore AngularJS, however, I am interested in creating a web application that can automatically update the user interface in real-time without needing to refresh the page whenever there is a change in the server-side database. ...

javascriptangularjswebsocketsocket.io

The jQuery highlight effect seems to be incompatible with Bootstrap's row classes and does not work as expected

I have implemented jQuery and Bootstrap 3 on my website. One of the tables on the site uses Bootstrap's table-striped class to create rows with different background colors. Some of these rows also have the "danger" class applied to display them in red ...

javascriptjquerytwitter-bootstrap-3

Show the entire background photo

Below is the CSS code I am currently using within an inline style: <div class="home-hero" style="background-image: url(https://dummyimage.com/300); background-position: 100% center; background-repeat: no-repeat; background-size: cover; height: 100%; wi ...

htmlcss

Combine an array of objects that are dynamically created into a single object

Having trouble transforming the JSON below into the desired JSON format using JavaScript. Current JSON: { "furniture": { "matter": [ { "matter1": "Matter 1 value" }, { "matter2": "Matter 2 value" }, { ...

javascriptjsonangulartypescriptobject

css background images are fully covered

Hey there! I recently created a CSS image that covers the entire background of my website. However, when I added a picture in the HTML, it doesn't show up because it's being overlapped by the CSS background. Check out my CSS code: { margin: 0 ...

htmlcss