'Hide scrollbars in Quasar/Vue - overflow hidden not working

I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).

So annoyed that I have already tried putting overflow:hidden everywhere but it is still there. Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.

How can I get rid of the outermost scrollbar?

enter image description here

Codepen:

https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer

javascripthtmlcssvue.jsquasar-framework


Solution 1:[1]

<q-layout container>

Remove container from q-layout.

<q-layout>

https://quasar.dev/layout/layout#qlayout-api

Solution 2:[2]

.scroll {
overflow: hidden;}

Add this class to your css

Solution 3:[3]

You can hide the scrollbar without loosing the scroll behavior with css...

/* Hide scrollbar */
::-webkit-scrollbar {
  display: none;
}

This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.

Solution 4:[4]

Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.

Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:

::-webkit-scrollbar {
   display: none;
}

Be aware that this will not work for firefox and IE. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zenojunior
Solution 2 Zumm
Solution 3 NaturalDevCR
Solution 4 Mike Smit

Related Questions