How to remove the page shift to the left when the scrollbar appears?

M

My joy2015-08-10 14:10:39

css

My joy, 2015-08-10 14:10:39

Good day to all.
When dynamically updating the tab, the height changes, which causes scrolling (vertical) in the browser, and the page shifts slightly to the left by the width of the scroll. how to make it so that scrolling does not affect the markup?
Thank you.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

P

Pongo, 2016-08-31
@t-alexashka

With the help calc(100vw - 100%), you can calculate the width of the scrollbar (and if it is not displayed, it will be 0). Idea: With a negative margin-right increase the width of the <html> by that width. At the same time, a horizontal scroll bar appears - hide it.

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

Example . Pressing the "change min-height" button hides/shows the scrollbar.

7

7GIT, 2020-11-26
@7GIT

html {
    width:100vw;
    overflow-x:hidden;
}

A

Aligatro, 2015-08-10
@Aligatro

It's hard to say without an example, but try adding overflow-x:hidden to the block.