Unable to achieve horizontal scrolling when using Locomotive Scroll with Vue.js

I am dealing with a challenge involving two pages - Home (vertical scrolling) and About (horizontal scrolling). I want to implement smooth scrolling, but I am encountering some issues.

When navigating from the Home page to the About page, the horizontal scrolling functionality on the About page stops working. However, refreshing the About page restores the horizontal scrolling function.

To troubleshoot the problem, I created a minimal version of the project. Upon investigation, I discovered that the line 

import "../assets/locomotive-scroll.css";
is causing the issue. I attempted various strategies such as loading the CSS based on routes and lifecycle methods, but the problem persists.

Steps to reproduce the issue:

  1. Open the project and preview it in a new tab (default preview shows that smooth scrolling is not functioning)
  2. Smooth scrolling on emojis works on the Home page
  3. Click on "Go to About" to navigate to the About page
  4. Verify that horizontal scrolling is not working (refreshing the page fixes the issue)
  5. Remove the line 
    import "../assets/locomotive-scroll.css";
  6. Notice that smooth scrolling on emojis stops working, but horizontal scrolling on the About page functions correctly

Link to codesandbox.io (open preview in new tab)

cssvue.jsvue-routerhorizontal-scrollinglocomotive-scroll

Answer №1

After some experimentation, I discovered that utilizing a locomotive on the About section with direction: horizontal instead of GSAP was the solution.

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

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 the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

javascriptjqueryhtmlcssselenium

The VueJS function is not defined

Looking for a way to fetch data from graphql in my vue project and store it in a variable. The function is asynchronous and the value of rawID needs to be awaited. However, there is a possibility that it could result in undefined, causing an error in the ...

javascripttypescriptvue.jsasynchronousgraphql

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...

htmlcssflexbox

Problem encountered with incorporating HTML background video into fluid responsive layout

Working on a webpage for a community event and integrated a countdown with a video background. However, encountering issues with responsiveness as it zooms in too much on mobile devices, making it difficult to view everything properly. (Translated using Go ...

htmlcssresponsive

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

Guide on making a Star Wars inspired rolling credits effect

I am having an issue with a CSS animation that mimics the Star Wars credits. The problem I'm facing is that the animation cuts off before all the text has scrolled. Why is it that I can't display all the text content I want within the animation? ...

csscss-animations

Troubleshooting problem with CSS layout when adjusting the height of a section

I recently delved into creating a simple website using HTML5 and have successfully set up the site structure. Everything has been smooth sailing so far. However, I've encountered a section of the site that seems to have a mind of its own. When I ass ...

csshtml

Getting a specific element of the "Event" object using javascript/typescript

Overview I successfully integrated a select box into my Vue.js/Nuxt.js application using Vuetify.js. I utilized the @change event to capture the selected value. <v-select v-model="selectedStartTime" :items="startTime" item ...

javascripttypescriptvue.jsnuxt.jsvuetify.js

Navigate to the specific page using the router-link with the designated path

I have 10 different filters displayed in a table and I want each filter name to link to a specific page. Here is an example of my table row: <md-table-row v-for="(row, index) in manage" :key="index"> In the first cell of the table, I'm trying ...

htmlvue.js

Using a JavaScript variable to control multiple CSS classes

Is there a way to assign multiple CSS classes to an HTML element, including one regular class and one or more JavaScript variables as classes? I attempted to do this by adding it in as a typical script: <div class="style-a <script type="text/javasc ...

javascripthtmlcss

Struggling to properly align div in the center

I've been struggling to properly center a div inside another div, but instead of being centered it appears shifted to the right. I've experimented with different positioning combinations and techniques from various sources, yet I haven't fou ...

htmlcssbootstrap-4

Center the list items vertically within a div by using the class list-inline

Struggling to vertically center the unordered list '.header-top-widget' within a div. Despite trying several methods, I can't seem to get it centered. My attempts so far include: .header-top-widget { display:flex; align-items:center; } ...

htmlcssbootstrap-5

Excess space appearing to the right of the text box in Internet Explorer 9 standards mode and Google Chrome

Looking for help on how to eliminate the space between the right side of an input textbox and a red border? Check out these examples: IE: http://jsfiddle.net/fQHGA/ <div style="float:left;border:1px solid red"> <label style="float:left">a ...

cssgoogle-chromeinternet-explorer-9

Manipulate CSS Properties with Javascript Based on Dropdown Selection

I am currently working on implementing a feature that involves changing the CSS property visibility: of an <input> element using a JavaScript function triggered by user selection in a <select> dropdown. Here's what I have so far in my cod ...

javascriptjqueryhtmlcss

Changing the Background Color of the Toolbar in Ionic

I am having trouble making the background color of my footer dynamic. I have tried binding the element to a class or applying dynamic styling, but it doesn't seem to work. Even when I have this in my HTML: <ion-footer align="center" style="height: ...

cssionic2

What is the best way to adjust the animation settings for SweetAlert2's Toast feature?

I recently integrated SweetAlert2's toast notifications into my web application and customized the animation using the customClass parameter to have the notification slide in from the right side. However, there are a couple of things I'm struggli ...

csssweetalert2

Positioning of textarea in CSS

As a CSS beginner, I am struggling to position the textarea on the right and the map on the left without the box covering the map. Here is the CSS I currently have: #CoordData { font-family: Arial, Helvetica, sans-serif; font-size: .9em; // pos ...

htmlcss

Achieve a full-page height navigation bar using CSS

Currently in the process of building a website utilizing CSS and HTML, I have successfully added a navigation bar to the left side of the page using this specific CSS code. However, an issue arises when the screen is scrolled down as the navigation bar doe ...

javascripthtmlcssnavigation

Are CSS class names the secret sauce of web design?

Imagine we have a 'Car' bean containing information about the color of a car, and we want to display the color name in that specific color along with an image of the car next to it. Currently, the bean handles the conversion of the color name to ...

cssjspenums

Using Vue-Slick to create dynamic data with v-for

I can't seem to get my images to display using vue-slick. I've tried multiple solutions without any success. Below is my template: <slick ref="slick" :options="slickOptions"> <img v-for="(item) in categories" :src="'/images/cate ...

vue.js