Remove overflow-y from html element

[DedDorito]

Steps to reproduce

Use Vuetify.

Versions

Latest of everything.

What is expected ?

html element to have no overflow-y set or overflow-y: auto

What is actually happening ?

html element has overflow-y: scroll, which forces a scrollbar to always be present.

Reproduction Link

https://codepen.io/anon/pen/JyXrNz

[Ragura]

For me the biggest problem with this is the shifting of the page content that occurs when opening a dialog, because the dialog removes the scrollbar entirely (or pushes it aside?).
I worked around it by manually setting the overflow-y to auto, but I've read in previous issue reports on this matter that it messes up the menus (don't have any in my app atm).

[DedDorito]

Yeah, I experienced the same thing with dialogs as well (navigation drawer too, etc.). I was assuming there is a reason for this, but perhaps there's a better way to achieve the same outcome than always persisting a scrollbar (main reason why I created this).

[johnleider]

The problem with this is there are just as many people who are already used to this. On top of that, a few points:

• The scroll-bar appearing and disappearing can be jarring when you have an SPA that switches between pages
• It's part of the reset we use and I specifically wanted

This has been brought up in the past, I just don't think it's difficult for a developer to just turn it off if they don't want it.

[Ragura]

The scroll-bar appearing and disappearing can be jarring when you have an SPA that switches between pages
I agree, but this is exactly what's happening with the current behaviour for components that do disable the scrollbar, like the dialog components. Content on the page jumps around because of the extra width. Unless there is an easy way to disable this as well?

[johnleider]

I don't understand that last part.

[DedDorito]

The scroll-bar appearing and disappearing can be jarring when you have an SPA that switches between pages

Isn't this the default behavior of nearly every page on the web? Generally speaking, the default for a scrollbar is almost always hidden unless the content requires it to be there.

I definitely agree it's trivial for a dev to override, but it seems to be an odd default in my opinion, which is why I initially opened this issue. If this is indeed intended and the way you'd like to keep it, feel free to close this issue.

Thanks :)

[DedDorito]

I don't understand that last part.

@johnleider https://vuetifyjs.com/components/dialogs (open a dialog as an example) Navigation drawers, dialogs, and other components automatically have overflow hidden, so the current behavior (default being to force the scrollbar) actually causes that constant jarring with the viewport width jumping back and forth.

[johnleider]

After speaking with the backers and devs, the consensus is to leave it as it is and allow the user to change it.

[CharlesOkwuagwu]

Hi, maybe we should include an example of how best to disable the scrollbar, for those who need it, as part of the FAQ.

Presently, the FAQ Question:

The scrollbar is showing even though my content is not overflowing vertically.

has as this Answer:

Vuetify by default turns on the html scrollbar. This is a design choice and has been debated numerous times. There are pros and cons to having and not having it and as of now, the vote is in favor of leaving it as is.

The present answer does help those looking for HOW to disable the scrollbar

[GeorgeZoum]

There are a few ways to have the scrollbar added or removed
::-webkit-scrollbar {
width: 1em;
background: yellow;
display: inline !important;
}

adding this, and adjusting the width to 0, for example, will remove the scroll bar, then, if you want to add or remove a scrollbar within a container, you would add it to it specifically
#thiscontainer ::-webkit-scrollbar {
width: 1em;
background: yellow;
display: inline !important;
}
Additional information on here

[https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp]

[Dirvann]

The problem is in the html element having the overflow-y:scroll css.

To remove the scrollbar add overflow-y:hidden as style to html and it's solved

example: <html style="overflow-y: hidden;"> in the index.html file

[LeeGrobler]

Vuetify by default turns on the html scrollbar. This is a design choice and has been debated numerous times. There are pros and cons to having and not having it and as of now, the vote is in favor of leaving it as is.

I can think of literally no "pros" to having overflow-y: scroll over overflow-y: auto as the default behaviour. Perhaps we can be enlightened on some of these pros?

And I agree that the lack of a standardized way of overriding this behaviour is a problem. What I ended up doing was adding the following to my public/index.html's head:

    <style>
      html { overflow-y: auto !important; }
    </style>

Which sucks, of course, because why is the framework forcing me to use !important

[klarkc]

This style brokes iframe default behavior, causing double scrolling bars, I had a lot of try-errors until I find this global style being the source of the problem. This behavior should not be default because of these kind of side-effects which are not visible.

For anyone having the same issue:

<template>
  <iframe
    frameborder="0"
    src="..."
    scrolling="no"
  />
</template>

<style>
html {
  overflow-y: hidden !important;
}
</style>

<style scoped>
iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

[KaelWD]

I don't see any reason to leave this in anymore, dialogs add padding to make up for missing scrollbars now:

vuetify/packages/vuetify/src/components/VOverlay/scrollStrategies.ts

Line 81 in 68b5a2f

const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth