Удаление горизонтальной полосы прокрутки

Question

В jsfiddle ниже есть две кнопки, которые открывают меню div с левой или правой стороны экрана.

Когда меню открыты, остальная часть сайта (я использовал html div) перемещается вместе с ними.

Моя проблема в том, что когда открывается левое меню, HTML-div становится прокручиваемым влево и вправо, в то время как не открывается, когда открывается правое меню.

Я не уверен, почему это так, но я хочу удалить прокрутку слева направо, если это возможно, без добавления overflow:hidden потому что таким образом я бы также потерял способность прокручивать вверх и вниз.

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

Мой код следующий:

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 1

html, body {
    overflow-x: hidden;
}

---

РЕДАКТИРОВАТЬ

Из комментариев:

Знаете ли вы, почему прокрутка влияла только на html/body, когда открывалось левое меню? Кажется странным, что это не сделало то же самое справа.

Подумайте о потоке контента.

В языковом режиме слева направо содержимое переполняется вправо. Не переполняется влево.

Следовательно, прокрутка (функция overflow в CSS) не применяется слева, потому что нет переполнения.

В языках справа налево верно обратное.

Вы можете переключить свой контент в режим RTL - либо с помощью CSS direction свойство или HTML dir Атрибут - включить RTL-прокрутку на языках LTR (но это хак и может запутаться).

Из спецификации:

11.1.1. Переполнение: overflow имущество

Это свойство указывает, обрезается ли содержимое элемента контейнера блока при переполнении поля элемента.

Опять же, в режиме чтения / записи LTR содержимое не переполняется влево.

В общем, обычно вызывать overflow свойство для прокрутки слева от области просмотра, только потому что overflow обычно ассоциируется с полосами прокрутки. Но на самом деле такой запрос предназначен для специализированной прокрутки, не имеющей ничего общего с overflow, Рассмотрим JS/jQuery.