刪除水平滾動條

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 /體時，左菜單打開？似乎很奇怪，它沒有在右邊做同樣的事情。

想想內容的流向。

在從左到右的語言模式下，內容溢出到右側。它不會溢出到左邊。

因此，滾動（CSS中的overflow函數）不適用於左側，因爲沒有溢出。

在從右向左的語言中，情況正好相反。

您可以用CSS direction屬性或HTML將內容以RTL模式– dir屬性–以啓用LTR語言RTL滾動（但它是一個黑客，會導致混亂）。

從規格：

11.1.1 Overflow: the overflow property

該屬性指定是否溢出時將其元素的盒子的塊容器元素 的內容被剪切。

此外，在LTR讀/寫模式下，內容不會溢出到左邊。

通常，調用overflow屬性滾動到視口的左側是很常見的，因爲overflow通常與滾動條關聯。但實際上這樣的請求是專門滾動的，與overflow無關。考慮JS/jQuery。