Jack1991 Jack1991 - 3 months ago 32
CSS Question

Removing left-to-right scrollbar

In the jsfiddle below there are two buttons that open a menu div on the left or right side of the screen.

As the menus are opened, the rest of the site (I used the html div) moves with them.

My problem is that when the left menu is opened, the html div becomes scrollable left and right, whereas it doesn't when the right menu is opened.

I'm not sure why this is, but I want to remove the left-to-right scroll if possible, without adding

overflow:hidden
because that way I would also lose the ability to scroll up and down.

https://jsfiddle.net/8nj5y4t1/62/

My code is the following:

HTML:

<header class="header">
<span id="button-one"></span>
<span id="button-two"></span>
<div class="push-menu-one"></div>
<div class="push-menu-two"></div>
<div class="overlay"></div>
</header>

<div class="content"></div>

<footer class="footer"></footer>


CSS:

html {
position:relative;
height:100%;
left:0;
right:0;
background-color:pink;
-webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
transition: all .6s cubic-bezier(.645,.045,.355,1);
}

body {
min-height:100%;
margin:0;
padding:0;

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.header {
height:70px;
width:100%;
background-color:white;
}

.content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;

width:85%;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}

.footer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

height: auto;
width: 100%;
padding: 10px 0 10px 0;
background-color: #efefef;
}

/* PUSH MENUS */

#button-one {
display:inline-block;
width:30px;
height:30px;
margin:20px;
background-color:green;
cursor:pointer;
}

#button-two {
display:inline-block;
float:right;
width:30px;
height:30px;
margin:20px;
background-color:orange;
cursor:pointer;
}

.push-menu-one {
position:fixed;
top:0px;
left:-295px;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:wheat;
-webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
transition: all .6s cubic-bezier(.645,.045,.355,1);
}

.push-menu-two {
position:fixed;
top:0px;
right:-295px;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:darkred;
-webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
transition: all .6s cubic-bezier(.645,.045,.355,1);
}

.overlay {
position:fixed;
z-index:9;
top:0px;
left:0px;
width:0px;
height:0px;
background-color:#000000;
opacity:0;

transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}

.overlay.open-right,
.overlay.open-left {
width:100%;
height:100%;
opacity:0.4;

transition: opacity 1s;
}
/* TOGGLE CLASSES */

html.open-left {
left:295px;
}

.push-menu-one.open-left {
left:0;
}

html.open-right {
left:-295px;
}

.push-menu-two.open-right {
right:0;
}


jQuery:

jQuery(document).ready(function($) {

$('#button-one').click(function() {
$('html, .overlay, .push-menu-one').toggleClass('open-left');

});

$('#button-two').click(function() {
$('html, .overlay, .push-menu-two').toggleClass('open-right');

});

$('.overlay').click(function() {
$('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-left');

$('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-right');

});

});

Answer
html, body {
    overflow-x: hidden;
}