I would like to disable scrolling on the HTML body without hiding the scroll bar . I have tried the following options:

• height: 100vh; overflow: hidden;
• position: fixed;

Both disabled the scrolling but hid the scroll bar.

CodePudding user response：

You can not disable scrollbar but you can add padding-right. For example:

body{
    overflow: hidden;
    padding-right: 17px;
}

CodePudding user response：

Here's how you solve this:

html { 
  height: 100vh; 
  overflow: auto;
}

body {
  margin: 0;
  height: calc(100vh   0.3px);
  overflow: hidden;
}

Find a value large enough to still create an overflow, but small enough to not actually result in scrolling.