Overflow-x Hidden no body

Asked

Viewed 325 times

3

I added Overflow-x: Hidden on body but it’s not working.

overflow Hidden disables scroll, or just hides bar?

html, body{
  overflow-x: hidden;
  -webkit-overflow-x: hidden;
  
}
/* tentei das duas formas */
body{
  overflow-x: hidden;
}

html css rolling
  • 2

    Just hide the toolbar. What is the expected result and what is the result obtained?

  • with this css that I added it is only hiding the bar, when the desired result is to block the horizontal scrolling

  • 1

    And what does the hidden bar imply in your page instead of just blocking ? You can use the overflow-x:auto.

1 answer

2


To prevent scrolling, it is best not to let the elements exceed the maximum size of the parent element. Otherwise, the only way is with a little Javascript:

function wheel(e) {
    console.log(e);
    if ( e.wheelDeltaX !== 0 ) {
        e.preventDefault();
    }
};

function disable_scroll() {
    if ( window.addEventListener ) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
};

disable_scroll();

See working: Jsfiddle

Browser other questions tagged html css rolling

You are not signed in. Login or sign up in order to post.