What might be causing the vertical scroll to become stuck on mobile devices?

When viewing the webpage on a mobile device, I encountered an issue where vertical scrolling was getting stuck. In the 

@media screen and (max-width: 952px) {}
section of my CSS, I had set overflow-x: hidden;, width: 100%;, and position: absolute; to prevent horizontal scrolling due to the hidden mobile nav bar on the right side. Despite trying to add overflow-y: scroll; and overflow-y: auto; with !important, I still faced difficulties with vertical scrolling.

You can check out the live version of the webpage at jacpel5.dreamhosters.com

Below is the HTML code for the 'Photography' page:

<!DOCTYPE html>
<html>
    <head>
        <title>Jacki Leigh - Photography</title> 
            <!-- title appears in browser tab -->
        <link href="myStyleSheet.css" rel="stylesheet" type="text/css">
            <!-- linking to myStyleSheet.css file for styling --> 
        <link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
            <!-- font family "Operetta 8" -->
        <link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
            <!-- font family "Relation Two" -->
        <link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
            <!-- linking to the favicon -->
        <meta charset="UTF-8"> 
            <!-- UTF-8 is the default character set for HTML5 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
            <!-- width=device-width sets the width of the page to follow the screen-width of the device --->
            <!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
        <meta name="robots" content="index, follow">
            <!-- allows the spider of a search engine to index the whole website -->
        <meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
        <meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
            <!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
        <meta name="author" content="Jacki Leigh Designs">
    </head>
    <body>

    <header>
       ...
    
</html>

CSS: 


...

JavaScript: 


...
javascripthtmlcssmobilevertical-scrolling

Answer №1

It appears that the issue lies in targeting both the html and body elements in your scroll settings using 

@media screen and (max-width: 952px)
. This can create a double scroll effect, which may lead to inconsistencies on mobile devices.

To resolve this, you can modify the styles by excluding html, placing the body styles outside of the media query, and changing the transform value in the .nav-links styles from 100% to 100vw. Although both values may seem similar, using vw (viewport width) tends to provide better results.


    body {
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    @media screen and (max-width: 952px) {
        .nav-links {
            transform: translateX(100vw);
        }
    }

Answer №2

Facing a similar issue on my website created in Webflow due to the CSS property overflow-x: hidden set on the body element. I found a solution by removing all styles from body except for margin: 0, then wrapping each section of the page with a div and applying a basic overflow: hidden.

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

How can I make the font of expandable TreeItems bold in a TreeView?

When iterating through an object and converting the key/value pairs to Material-UI TreeItems, is there a method to apply custom styling (such as setting the font-weight to bold) to expandable TreeItems? ...

javascriptreactjsmaterial-uitreeview

Servlet question: What causes the XMLHttpRequest responseText to consistently appear empty?

I've been going crazy trying to figure out how to solve this issue. I have a servlet deployed in Tomcat running on localhost:8080 that looks like this: @WebServlet(urlPatterns = { "/createcon" }, asyncSupported = true) public class CreateCon extends ...

javascriptajaxtomcatservlets

What causes the form to vanish when using the ngFor directive?

Whenever I use the ngFor directive within a form tag, the entire form seems to disappear. Does anyone have any advice on how to resolve this issue? <form #myforms="ngForm" *ngFor="let i of editaddress"> <div class="p-3 p-lg-5 border"> < ...

htmlangular6ngfor

Using script tags in JQuery tabs to create dynamic content

My goal is to load dynamic content into each of the four jquery tabs. When a user clicks on a tab, I trigger a jquery ajax call to fetch the content specific to that tab. The content includes a set of accordions with script tags embedded in it. Strangely, ...

jqueryhtmlajaxdom

After making a call to the backend in React, the action function consistently returns the same reducer type

As I finalize my 2FA implementation, the last step involves detecting whether a user has enabled it or not. I've created a function that checks for this and returns the following: if (!user.twoFactorTokenEnabled) { // Allow user to login if 2FA ...

javascriptreactjsreact-reduxredux-reducers

Encountering a Issue with POST Method in AngularJS Calling .NET WebAPI

I am currently facing a challenge with my AngularJS and .NET WebAPI integration. While I can retrieve content or objects successfully through the WebAPI, I am encountering difficulties when attempting to POST data. When trying to post the content, I recei ...

javascriptc#angularjsasp.net-web-apicors

Mocking a Class Dependency in Jest

I have 4 classes available, and I utilize 3 of them to create an instance of another class. This is how it's done: const repo = new PaymentMessageRepository(); const gorepo = new GoMessageRepository(); const sqsm = new PaymentMessageQueueManager(pr ...

javascripttypescriptdependency-injectionjestjs

Utilizing StyleFunctionProps within JavaScript for Chakra UI Enhancements

I need help figuring out how to implement StyleFunctionProps in my Chakra UI theme for my NextJS project. The documentation on Chakra's website provides an example in Typescript, but I am working with Javascript. Can someone guide me on adapting this ...

javascriptreactjstypescriptnext.jschakra-ui

What is the best way to implement nested routing in React using the "exact" parameter for my specific use case?

Having some trouble accessing other components from the Router Home page. The current structure I'm using is causing the "404" page to not open. Additionally, when I add the exact path="/" parameter to the PrivateRoute, the Home component fails to ren ...

javascriptreactjsreact-routerreact-router-domnested-routes

What is the best way to load an audio source directly from memory?

In my current setup, I have implemented a functionality where text is sent to the backend, which in turn returns an audio file representing that speech. The URL of the audio file is then assigned to the 'src' attribute of an 'audio' ele ...

javascripthtmlaudio

What is the best way to ensure that each box remains separate and does not overlap with the box next to it?

Just an FYI - styling in React using CSS is quite similar to regular CSS. Each individual box has its own code snippet: export const CardWrapper = styled.div` display: flex; flex-direction: column; align-items: center; border-radius: 4px; backg ...

cssreactjsflexbox

testimonial section that can be used multiple times

I am looking to create a unique testimonial block design with left and right text icons. This block will be embedded into the markup as a separate block and also integrated into a slider. I am currently using the foundation grid 6, but I plan to use Visu ...

htmlcsswordpressresponsive-design

What is the best way to combine an array of objects into a single object in typescript?

Looking for some help with converting an array of objects into a single object using TypeScript. Here's the structure of the array: myArray = [ {itemOneKey: 'itemOneValue', itemTwoKey: 'itemTwoValue'}, {itemThreeKey: ' ...

javascriptarraystypescriptjavascript-objects

Vue component for resizing and resetting image files

In my Vue project, I am utilizing vue-image-upload-resize. Everything is functioning well except for the two issues I am facing: Is there a way to eliminate the text near the 'choose file' button? https://i.sstatic.net/YjyPg.png How can I r ...

javascriptvue.js

A complete guide on executing synchronous HTTP requests while using async.each in Node.js

My goal is to send HTTP requests to APIs, retrieve data for each user, and then insert that data into MongoDB. The issue I'm facing is that all the requests are being made simultaneously, causing the process to get stuck at some point. I'm using ...

javascriptnode.jsasynchronous

Is there a way to incorporate TypeScript type definitions into a JavaScript module without fully transitioning to TypeScript?

Although the title may be a bit confusing, it encapsulates my query in a succinct manner. So, here's what I'm aiming to achieve: I currently have an npm module written in JavaScript, not TypeScript. Some of the users of this module prefer using ...

javascripttypescripttypes

Error encountered when trying to dynamically load jQuery UI - Uncaught TypeError: Unable to read property 'ui' of undefined

I am facing an issue with dynamically loading my jQuery and jQuery UI files. The jQuery file loads successfully, but an error occurs when the jQuery UI file attempts to load. Upon checking the console, I found the following error message: Uncaught TypeErr ...

javascriptjqueryjquery-ui

When using Next.js revalidate, an error may occur stating: "There are keys that require relocation: revalidate

I have been attempting to utilize the revalidate function in my code by following the example provided by Vercel. However, I keep encountering an error. Here is the snippet of code that I am currently using: export async function getServerSideProps() { c ...

javascriptmongodbnext.js

Dynamic table in Vue.js updates with saved data when button is clicked

I am looking for assistance on how to work with two or more parameters using Vue.js. I have a data-saving functionality where three inputs are used and the data is saved to a table upon button click. There is an $.ajax() function involved, but I need help ...

javascriptjqueryhtmlajaxvue.js

Ways to deactivate certain dates in ion-datetime?

In my Ionic3/Angular app, I am utilizing ion-datetime to choose a specific date. However, I would like to disable certain dates within the ion-datetime component. Despite reviewing the documentation, I couldn't find any clues on how to accomplish this ...

javascriptdatetimeionic-frameworkionic3