CODEWITHSUNDEEP
javascriptjqueryhtmlcssflexbox
Jack Averill
Jack Averill

Reputation: 851

Removing horizontal 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');

});

});

Upvotes: 3

Views: 2448

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372019

html, body {
    overflow-x: hidden;
}

EDIT

From the comments:

Do you know why the scroll only affected the html/body when the left menu opened? Seems strange that it didn't do the same on the right.

Think about the flow of content.

In left-to-right language mode, content overflows to the right. It does not overflow to the left.

Hence, scrolling (a function of overflow in CSS) doesn't apply to the left because there is no overflow.

In right-to-left languages, the reverse is true.

You can switch your content to RTL mode – either with the CSS direction property or the HTML dir attribute – to enable RTL scroll in LTR languages (but it's a hack and can get messy).

From the spec:

11.1.1 Overflow: the overflow property

This property specifies whether content of a block container element is clipped when it overflows the element's box.

Again, in LTR reading/writing mode, content does not overflow to the left.

In general, it's common to invoke the overflow property for scrolling to the left of the viewport, only because overflow is commonly associated with scroll bars. But in reality such a request is for specialized scrolling, having nothing to do with overflow. Consider JS/jQuery.

Upvotes: 5

Related Questions