Overflow-X:Hidden Still Can Scroll

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.

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.

Overflow-x:hidden can still scroll

it's hard to answer a question without it's code but I think I already know your problem

overflow-x:hidden; is a good idea but it will prevent your elements from OVERFLOW, in your case since you're testing your page in mobile it's not OVERFLOW it's one of your element's margin or padding or wrong width

so to find that element right click on your page (in desktop) click on Inspect Element Choose Responsive Toggle Button (in the top bar of inspector tab) resize your page onto sizes with error, right click on body element choose "expand recursively" and look for element that is causing extra space (hovering in your codes will highlight them and you can see their box-model sizing and find your buggy bug)

the problem is solved when you find it! you can remove extra width or margin or padding from it

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;
}

unable to get rid of a x-overflow (scrollbar is hidden but I can still scroll to the right)

There is no such CSS property as x-overflow, you probably want overflow-x instead.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

You need to set that to 'hidden' to disable scrolling. You should look for the element that is wider than it should be (the element, that causes the scrolling). On its parent, you should have overflow-x: hidden, or you should prevent that element from being wider at all.

Overflow-x:hidden; can still scroll when open at my phone

Have a look at the div.wrapper-circle, tat's the problem, some circle in this div cross the border

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.

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.

Overflow-X:Hidden Still Can Scroll