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

Question

В приведенной ниже таблице представлены две кнопки, которые открывают меню 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; 
} 

---

EDIT

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

Вы знаете, почему свитка затронула только HTML/тело, когда открыто меню слева? Кажется странным, что он не делал то же самое справа.

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

В режиме слева направо, содержимое переполняется вправо. Он не переполняется влево.

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

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

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

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

11.1.1 Overflow: the overflow property

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

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

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