When the menu mobile is open, I successfully disable scrolling on the body, but I am facing an issue where the desktop page always jumps back to the top

I successfully disabled the scroll on the body, thanks to helpful advice from SO! However, I encountered an issue where the body kept jumping back to the top whenever I opened my mobile menu.

If I remove the following code:

overflow: hidden;

The scroll is no longer disabled on the body, but at least it doesn't jump back to the top when I open my mobile menu.

I apply my CSS class .overflowHidden to the body and html elements when the burger menu is open.


const [showBurgerMenu, setShowBurgerMenu] = useState(false)

const handleOnClick = () => {
    const burger = document.querySelector('.burger');
    burger.classList.toggle('active');
    setShowBurgerMenu(!showBurgerMenu);
    if (showBurgerMenu === false) {
        document.querySelector("body").classList.add("overflowHidden");
        document.querySelector("html").classList.add("overflowHidden")
    } else if (showBurgerMenu === true) {
        document.querySelector("body").classList.remove("overflowHidden");
        document.querySelector("html").classList.remove("overflowHidden");
    };
}

My CSS class:

.overflowHidden {
  overflow: hidden;
  margin: 0;
  touch-action: none;
  -ms-touch-action: none;
  position: fixed;
  height: 100%;
}

Thank you for your assistance! PS: I am using NextJS so I'm not sure if that is relevant.

javascripthtmlcssmenunext.js

Answer №1

Applying position : fixed; and then returning will reset the position of your body because a fixed element is not part of the page's flow.

To ensure the element (in this case the body) takes up the whole screen and prevents any scrollbar from appearing, we need to change its height from 100% to 100vh.

.overflowHidden {
  overflow: hidden;
  margin: 0;
  touch-action: none;
  -ms-touch-action: none;
  /* We remove 'position: fixed;' line which resets the flow of the page */
  /* Change 'height: 100%;' to 'height: 100vh;' */ 
  height: 100vh;
}

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

Discovering an Improved Method for Implementing a Functional jQuery Menu Bar

Currently, I have a functioning Menubar where each button on the menu triggers a secondary Menubar using jQuery. The code snippet is as follows: <script> $(document).ready(function(){ $("#homeButton1").mouseover(function(){ $(".secondMen ...

javascriptjqueryhtml

How to manually trigger the ajaxLoader feature in Tabulator version 3.5

Currently, I am working with version 3.5 of Tabulator from . When populating the table using an ajax request, a "loading icon" is displayed during the loading process. Prior to executing the ajax request for Tabulator, I perform some preliminary check op ...

javascriptajaxtabulator

Once it hits the fourth tab, it must not cycle back to the first one

Hi there, I'm new to JavaScript I noticed that when I click the left and right arrows, the tabs circle back to the beginning However, I would like the circle to stop. When it reaches the fourth tab, it should not go back to the first. This should also ...

javascriptjqueryhtmlcss

The minmax() function in a responsive grid layout does not function properly when incorporating grid areas

My Vision for the Layout I am striving to create a dynamic grid structure with three columns and two rows, where the third column spans both rows and features an image. This layout should adjust itself based on the device screen size: Specifically, I wou ...

csslayoutresponsive-designcss-grid

Let's explore further - delving into JSON & array manipulation using the foreach loop in Pure JavaScript

Although I have some experience with Java Script, I still consider myself a beginner in certain areas, particularly when it comes to accessing JSON objects and arrays. I've tried various syntax and options for accessing arrays using [], but so far, I ...

javascriptarraysjson

Why isn't the dropdownlist setting a default value in Javascript?

<select id="modalAdd_DDLSample"> </select> <option value=0> PC</option> <option value=1> MAC </option> <option value=2> Rasberry </option> $("#modalAdd_DDLSample").val("1"); $("#modalAdd_DDLSample").val(1); ...

javascriptjquerydrop-down-menubootstrap-4

Error message: "Named export cannot be identified"

My file structure looks like this: routes auth login index.js Login.jsx routes.js Within the routes.js file, I have the following code snippet: import { Route } from 'react-router-dom'; import { Login } from './login ...

javascriptreactjsecmascript-6import

Changing content of inline editable data table in Vuetify through a method

I am facing a challenge while attempting to update the value in my inline edit data table from a method. The issue lies in the fact that the item I pass is not getting updated. In my cancel method, I pass props.item to be updated. While props.item.iron pr ...

javascriptvue.jsvuetify.js

Position elements in the center of the page at 33.3333% width

I'm facing a challenge with centering elements that are floated left and have a width of 33.33333% on the page. I want the text inside these elements to remain aligned to the left, but I'm unsure how to go about centering the items: ul.home-pr ...

htmlcss

How to refine a schema by applying filters from another schema

I am working with 2 different Schemas const mongoose = require('mongoose'); const Schema = mongoose.Schema; const {ObjectId} = mongoose.Schema; const matchList = new Schema({ user:[{ type: ObjectId, ref:'User' } ...

javascriptnode.jsmongodbexpressmongoose

Displaying the active navigation element in ApyCom JavaScript jQuery menu: tips and tricks

Currently, I am utilizing the jQuery navigation menu from ApyCom. Everything seems to be functioning properly except for one issue. Whenever I click on a different navigation element, I expect that element to remain highlighted in order to indicate to the ...

javascriptjqueryhtmlnavigation

Steps to verify multiple v-for loops and apply style if both are present

<div v-for="memberMembershipyear in memberMembershipyears"> <li v-for="membershipYear in membershipYears" :style="membershipYear.num === memberMembershipyear.num ? 'color:green' : color:red'"> {{membershipYear.me ...

javascriptvue.jsstylesv-for

What is the best way to locate a div element with a specific style?

What is the method to locate a div element by its style? Upon inspecting the source code in IE6, here is what I find: ...an><div id="lga" style="height:231px;margin-top:-22px"><img alt="Google"... How can this be achieved using JavaScript? ...

javascripthtml

Attempting to create an aesthetically pleasing HTML container surrounding input fields

I'm attempting to create a border around multiple fields using HTML and CSS. I've tried placing <p> tags around my <form> tags, but it's not achieving the desired effect. Additionally, using <div> tags seems to be complicat ...

htmlcssangularjs

Creating a loading screen with JQuery for an Ajax request

I want to implement a loading screen in my web application every time an ajax call is initiated using jQuery. Currently, I have different types of ajax calls such as $.getJSON, $.post, and $.ajaxFileupload, each with their own Success function that remov ...

htmlajaxjquery

A guide to obtaining the path and filename of an uploaded file in Node.js

I'm currently working on a web application using React and I'm looking to enable the uploading of docx/pdf files and converting them to pdf/docx. Due to security measures, it's not possible to access file paths directly in React. I've c ...

javascriptnode.jsreactjswebfile-manipulation

Validate User Input Using jQuery to Check if Empty or Deleted

Users can enter text into an input field, and an image will be displayed if the input is valid or invalid. I want to remove or change the image when the input field is empty. Despite writing the following code, it doesn't seem to work: $('#inpu ...

javascriptjqueryhtml

How can Angular JS and HTML5 be used to dynamically create controls?

I have designed a unique project to demonstrate dynamic control creation using angularjs and html5. The project includes an xml file with a set of controls, complete with property and event attributes that can be generated dynamically. Initially, all the ...

jqueryxmlhtmlangularjsdynamic

Error: Attempting to access 'scrollTop' property of null object in Material UI library

After updating from MUI-4 to MUI-5, I encountered this error. Can anyone provide assistance? ...

javascriptreactjsmaterial-ui

Select the send all text option when making a request

Using ajax, I can dynamically fill a drop-down select menu. My next step is to include all the text from the selected options in my request. <select name=".." > <option value="0"> ... </option> <option value="1"> xxx </option ...

javascriptjqueryhtmlajaxspring-mvc