Fix the issue of the screen bouncing around when the scroll bar is visible

When my modal popup appears on screen, I am using the CSS property overflow: hidden to eliminate the scrollbar.

To ensure that the screen does not shift when the scrollbar disappears, I am calculating the scrollbar width using JavaScript and adding padding dynamically. Here's an example:

<div className='site-layout-wrapper' style={{'padding-right': modal ? `${scrollbarWidth}px` : '0'}}>

However, I am facing a problem with a slight shift when the scrollbar reappears. How can I solve this issue?

cssreactjs

Answer №1

Avoid using the padding-right property as the width of the scrollbar varies depending on the browser. Instead, you can set the container to overflow: scroll; while setting the content to overflow: hidden;. This will ensure that the scrollbar is always displayed but scrolling will be disabled when the modal is open.

For instance:

In your .css:

body {
    overflow-y: scroll;
}

.site-layout-wrapper.modal-active {
    overflow-y: hidden;
    max-height: 100vh;
}

In your .jsx:

<div className={`site-layout-wrapper ${modal && 'modal-active'}`}>

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

Error: Unable to open Reactjs application using npm start command in browser

Currently, I am following a tutorial on React to enhance my skills. Everything was going smoothly until I executed the 'npm start' command and encountered the following error message: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:&b ...

reactjsnpm

Possible conflict between CSS and JavaScript on Magento website

Problem Description: Visit this link for more details I am facing an issue with the product upload process when using certain attributes. It appears to be related to a positioning problem. Despite trying various solutions, such as removing the position at ...

javascriptjquerycssmagento

In React, ensure a component's state is preserved when the browser history changes

I recently developed a React application that features a classic layout with a left-side menu, title, footer, and main content section. The side menu includes navigation links structured using components such as <List>, <ListItem>, etc. from th ...

javascriptreactjsmaterial-ui

Unexpected resizing occurs when SVGs are nested within each other

I am experimenting with using nested inline SVGs to creatively position smaller svg images within an svg container. However, I am finding it challenging to grasp the guidelines for sizing nested SVG elements. svg { display: block; } Here is my query - ...

htmlcsssvg

ReactJS safeguarded route redirection/refresh obstacle

Utilizing react and react-router-dom: import React from 'react'; import { Switch, Route, Redirect } from 'react-router-dom'; To secure a route with the following: Router const Router = () => { return ( <Switch> ...

javascriptreactjs

The functionality of nested dynamic routing in the API is experiencing issues

Looking to extract product details from a specific category of products? My folder structure appears as follows: https://i.stack.imgur.com/1UCy3.png In "productId/index.jsx" => This snippet is utilized to retrieve individual product details: ...

javascriptreactjsnext.js

Turn off all the styles associated with a specific CSS selector

Looking for a solution to override CSS rules for the .lp-caption selector? .lp-caption { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; backgr ...

css

Transform Typescript into compiled css files without using any additional tools

Currently, I am working on a monorepo project where the main project relies on another project called components. When running the entire monorepo, the main project utilizes webpack.dev while the components project simply uses the TypeScript compiler. It l ...

csstypescriptwebpack

Is it possible to set up and start Next.js using a self-hosted Node.js server?

I am a newcomer to Next.js and my main objective is to achieve SSR (Server Side Rendering) with my React web application. My intention is to host it on a VPS that I have control over. Everything works smoothly when running the app locally, but things beco ...

node.jsreactjsnext.jsdeployment

Expanding space underneath for inline-block elements

Is there a way to create a page layout with inline-block elements that are vertically aligned to the top and fold into open space like floated elements do when placed below another set of inline block elements? It seems as though they follow row-like rules ...

htmllayoutcss

CSS 3 - Apply transition to the 'display' property

I have a question about using the transition effect in conjunction with the display property: Currently, I am testing on Safari. input.input_field { display:none; transition-property: display; transition-duration: 2s; -webkit-transition-p ...

htmlcsssafaritransition

Issues with external stylesheet functionality (effective internally)

When coding with internal CSS, everything appears as expected. However, after moving the CSS to an external file, certain properties seem to stop working. To view the code with the external CSS and identify the issues, check out the following link: https ...

htmlcssbootstrap-4

What is the process for changing the order status?

I am currently in the process of developing an e-commerce website. I have come across some logic to allow the admin to update the order status, but I am facing difficulties with updating the status of orders using Postman and creating a suitable frontend ...

node.jsreactjsexpressmongoose

Managing promise chain within the constructor of a React component

I am experiencing an issue with my API data fetching process. The challenge occurs because the rendering takes place before the constructor has completed fetching the data. As a result, the this.todo being sent to the List component ends up being empty. ...

javascriptreactjspromise

Tips for customizing the appearance of a Link component while it is the active page in Next.js

I'm seeking advice on how to style an anchor component differently when it is active on a page. Here's the code I have so far: import Link from 'next/link'; import styled from 'styled-components'; const NavStyle = styled.nav` ...

javascriptnode.jsreactjsnext.jsstyled-components

Create a div that pops up when clicked, just like the Fancybox jQuery feature

I'm looking to create a popup div with an elastic effect similar to jQuery's fancybox. I've tried using the following code, but it doesn't seem to work... Here is the HTML: <a href="#" id="LoginAnchorLink">ClickME</a> < ...

jqueryhtmlcssfancybox

Is there a way to personalize the MUI pagination bar to fit my needs?

I am looking to personalize the mui pagination bar by customizing the first page and last page buttons <, > with the words 'prev' and 'next'. ...

reactjsmaterial-ui

There seems to be an issue with the Link component from react-router-dom when used in conjunction with

I am currently utilizing react-router-dom along with Material-ui My main objective is to create a clickable row in a table that will lead to a specific path. Here is the code snippet: .map(client => ( <TableRow key={client.id} component={Link} to ...

javascriptreactjsmaterial-ui

Unable to transmit function from useState to component

I have the main component called App.js where I created a database-like structure. My goal is to store the object of the authorized user within App.js by using useState. import React, {useState} from 'react'; import './App.css'; import ...

reactjsreact-hooks

react-video-recorder` facing challenges with loading

I recently integrated react-video-recorder into my application. After checking out the demos on Stackblitz and Storybook hosted on Vercel, I was impressed with how well it worked in my browsers. However, when I added it to my codebase, the component would ...

javascriptreactjsweb-mediarecorder