Body Set to Overflow-Y:Hidden But Page Is Still Scrollable in Chrome

Body set to overflow-y:hidden but page is still scrollable in Chrome

I finally found a way to fix the issue so I'm answering here.

I set the overflow-y on the #content instead, and wrapped my steps in another div. It works.

Here is the final code:

<body>
  <div id="content">
    <div id="steps">
       <div class="step">this is the 1st step</div>
       <div class="step">this is the 2nd step</div>
       <div class="step">this is the 3rd step</div>
     </div>
   </div>
</body>

#content {
  position:absolute;
  width:100%;
  overflow-y:hidden;
  top:0;
  bottom:0;
}
.step {
  position:relative;
  height:500px;
  margin-bottom:500px;
}

overflow-x:hidden still can scroll

I don't think there's any way to prevent scrolling of an element without using JavaScript. With JS, though, it's pretty easy to set scrollLeft to 0 onscroll.

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue.

It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.

Note: You may also need to add position: relative to the wrapper div.

Hide scroll bar, but while still being able to scroll

Just a test which is working fine.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

Prevent body scrolling but allow overlay scrolling

Theory

Looking at current implementation of the pinterest site (it might change in the future), when you open the overlay, a noscroll class is applied to the body element (setting overflow: hidden) making the body no longer scrollable.

The overlay created on-the-fly or already injected in the page and made visible via display: block — it makes no difference – has position : fixed and overflow-y: scroll, with top, left, right and bottom properties set to 0: this style makes the overlay fill the whole viewport (but now we are in 2022, so you may use inset: 0 instead).

The div inside the overlay is in position: static so the vertical scrollbar is related to that element. This is resulting in a scrollable but fixed overlay.

When you close the overlay, you have to hide it (using display: none) and you could even remove the node via javascript (or just the content inside, it's up to you but also depends on the nature of the content).

The final step is to also remove the noscroll class applied to the body (so the overflow property gets back to the value it had previously)

Code

Codepen Example

(it works by changing the aria-hidden attribute of the overlay in order to show and hide it and to increase its accessibility).

Markup

(open button)

<button type="button" class="open-overlay">OPEN LAYER</button>

(overlay and close button)

<section class="overlay" aria-hidden="true" tabindex="-1">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

CSS

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   inset: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }

Javascript (vanilla-JS)

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]'),
    openingBtt;
    
[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 
     
     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';
     
     /* storing a reference to the opening button */
     if (overlayOpen) {
        openingBtt = this;
     }
     
     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);
     
     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;
     
      /* forcing focus for Assistive technologies but note:
    - if your modal has just a phrase and a button move the
      focus on the button
    - if your modal has a long text inside (e.g. a privacy
      policy) move the focus on the first heading inside 
      the modal
    - otherwise just focus the modal.

    When you close the overlay restore the focus on the 
    button that opened the modal.
    */
    if (overlayOpen) {
       overlay.focus();
    }
    else {
       openingBtt.focus();
       openingBtt = null;
    }

  }, false);

});

/* detect Escape key when the overlay is open */
document.body.addEventListener('keyup', (ev) => {
   if (ev.key === "Escape" && overlay.getAttribute('aria-hidden') === 'false') {
      overlay.setAttribute('aria-hidden', 'true');
      body.classList.toggle('noscroll', false);
      openingBtt.focus();
      openingBtt = null;
   }
})

Finally, here's another example in which the overlay opens with a fade-in effect by a CSS transition applied to the opacity property. Also a padding-right is applied to avoid a reflow on the underlying text when the scrollbar disappears.

Codepen Example (fade)

CSS

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     inset: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

Chrome scrollbar disappears (not overflow-y)

1) Why scrollbars are different on the same OS and browser version, but different machines ?

This probably has to do with the system settings on macOS.

macOS scroll bar OS settings

If you have Always selected, I'm pretty sure that the scrollbar pushes the page content out of the way. Same with if you have a mouse connected. Otherwise, it has the "absolutely positioned" behavior you mentioned. Keep in mind that Windows users will probably see behavior similar to Always.

2) Is there any way to fix this without any plugins ? Taking into consideration Windows users have the case 2 and MacOS users either case 1 or 2 ?

Well, a bit of opinion first: I don't think it's a good idea to hide the scrollbar without providing another cue to the user communicating the scrollability of the element. Anyway, with that out of the way, I can't think of anything that's not some kind of hack but here goes:

Since this is something that only needs to execute once, and assuming that we want predictable functionality across browsers and OS, you can use some JS here. On systems which persist the sidebar the offsetWidth and scrollWidth properties of the sidebar element will be different. By default, your element could have the follow styles:

$child-h-padding: 15px;$max-scrollbar-width: 35px;
.r-sidebar {  overflow-y: scroll;  padding: 12px $child-h-padding;  ...rest}
.r-sidebar--r-padded {  padding-right: $child-h-padding + $max-scrollbar-width;  right: -$max-scrollbar-width;}

Div containing flexbox not scrolling when body overflow set to hidden

You don't need overflow: hidden on the body element.

Just make the .mpct-container full height — height: 100% not height: 2400px.

And give its content (.mpct-timeline1) the height: 2400px.

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Zen+Kurenaido&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  /* overflow: hidden; */ /* not necessary */
  font-size: 30px;
}

body {
  background: white;
  font-family: 'Zen Kurenaido', sans-serif;
}

.mpct-container {
  display: flex;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 75vw;
  /* height: 2400px; */
  height: 100%;  /* new */
  border-right: 1px hsl(0deg, 0%, 80%) solid;
  overflow: scroll;
}

.mpc-timeline {
  display: flex;
  flex-direction: column;
  width: 6%;
  font-size: 0.5rem;
  height: 2400px; /* new */
}

.mpct-hour {
  min-height: 0;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.mpct-hour.alternate {
  background-color: hsl(0deg, 0%, 95%);
}

<div class="mpct-container">
    <div class="mpc-timeline">
      <div class="mpct-hour mpct-0">12 AM</div>
      <div class="mpct-hour alternate mpct-1">1 AM</div>
      <div class="mpct-hour mpct-2">2 AM</div>
      <div class="mpct-hour alternate mpct-3">3 AM</div>
      <div class="mpct-hour mpct-4">4 AM</div>
      <div class="mpct-hour alternate mpct-5">5 AM</div>
      <div class="mpct-hour mpct-6">6 AM</div>
      <div class="mpct-hour alternate mpct-7">7 AM</div>
      <div class="mpct-hour mpct-8">8 AM</div>
      <div class="mpct-hour alternate mpct-9">9 AM</div>
      <div class="mpct-hour mpct-10">10 AM</div>
      <div class="mpct-hour alternate mpct-11">11 AM</div>
      <div class="mpct-hour mpct-12">12 Noon</div>
      <div class="mpct-hour alternate mpct-13">1 PM</div>
      <div class="mpct-hour mpct-14">2 PM</div>
      <div class="mpct-hour alternate mpct-15">3 PM</div>
      <div class="mpct-hour mpct-16">4 PM</div>
      <div class="mpct-hour alternate mpct-17">5 PM</div>
      <div class="mpct-hour mpct-18">6 PM</div>
      <div class="mpct-hour alternate mpct-19">7 PM</div>
      <div class="mpct-hour mpct-20">8 PM</div>
      <div class="mpct-hour alternate mpct-21">9 PM</div>
      <div class="mpct-hour mpct-22">10 PM</div>
      <div class="mpct-hour alternate mpct-23">11 PM</div>
    </div>
  </div>

CSS hide scroll bar, but have element scrollable

You can hide it:

html {
  overflow:   scroll;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

For further information, see: Hide scroll bar, but while still being able to scroll

Body Set to Overflow-Y:Hidden But Page Is Still Scrollable in Chrome