側滑出菜單 - 潛在的視口/溢出問題

Question

停止移動設備上的用戶無法水平滾動的最佳方法是什麼？我試圖有一個「滑出」菜單，打開後將身體內的所有內容推到一邊。使用overflow: hidden似乎沒有影響。

目前，在移動解析度（在iPhone/safari上進行測試）時，用戶可以向右滾動顯示菜單，然後點擊「打開」按鈕。因此，該菜單對用戶來說不會隱藏。

我還沒有能夠測試除iPhone以外的其他移動設備。

當前使用的meta標籤：

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> 

紐帶，以活生生的例子，jsFiddle。

Answer 1

對溢出屬性的支持有時候是iffy是對移動瀏覽器的支持。因此如果瀏覽器不支持overflow：hidden屬性，用戶仍然可以看到div。

我建議使用display：none隱藏div，然後在腳本內部根據需要更改顯示。

這裏是一個片斷..

var body = $('body'); 
 
var button = $('#button'); 
 
var menu = $('#menu'); 
 
var menuWidth = $('#menu').width(); 
 
var closeMenu = $('#menuClose'); 
 

 
menu.css({ 
 
    right: -menuWidth 
 
}); 
 
button.html('Open'); 
 

 
function menuOperation() { 
 
    event.preventDefault(); 
 

 
    if (body.css('right') == '0px') { 
 
    body.animate({ 
 
     right: +menuWidth 
 
    }, 600); 
 
    button.html('Close'); 
 
    button.css('background', 'rgba(203,203,203,1)'); 
 
    menu.css('display', 'block'); /* added this */ 
 
    } else { 
 
    body.animate({ 
 
     right: 0 
 
    }, 600); 
 
    button.html('Open'); 
 
    button.css('background', 'rgba(192,59,84,1)'); 
 
    menu.css('display', 'none'); /*added this */ 
 
    } 
 
} 
 

 
button.on('click', function(event) { 
 
    menuOperation(); 
 
}); 
 

 
closeMenu.on('click', function(event) { 
 
    menuOperation(); 
 
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 
 
body { 
 
    width: 100%; 
 
    right: 0; 
 
    margin: 0; 
 
    background: rgba(236, 236, 236, 1); 
 
    position: relative; 
 
    overflow: auto; 
 
    /*changed this */ 
 
} 
 
#button { 
 
    width: 125px; 
 
    height: 30px; 
 
    padding: 10px 0 10px 0; 
 
    font-size: 20px; 
 
    background: rgba(192, 59, 84, 1); 
 
    color: rgba(255, 255, 255, 1); 
 
    font-family: 'Open Sans'; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 15px; 
 
    transition: all 0.2s ease-in-out; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    cursor: pointer; 
 
} 
 
@media(min-width: 321px) { 
 
    #button { 
 
    width: 100px; 
 
    height: 22px; 
 
    padding: 8px 0 10px 0; 
 
    font-size: 16px; 
 
    } 
 
} 
 
#menu { 
 
    width: 300px; 
 
    height: 650px; 
 
    background: rgba(24, 24, 24, 0.95); 
 
    color: rgba(255, 255, 255, 1); 
 
    position: absolute; 
 
    right: 0; 
 
    display: none; 
 
    /*changed this */ 
 
} 
 
#menu > div:first-child { 
 
    width: 100%; 
 
    padding: 22.5px 0; 
 
    color: rgba(255, 255, 255, 1); 
 
    font-family: 'Open Sans'; 
 
    font-size: 14px; 
 
    text-align: right; 
 
    text-transform: uppercase; 
 
    direction: rtl; 
 
    text-indent: 70px; 
 
    opacity: 1; 
 
    transition: opacity 0.8s ease-in-out; 
 
    -webkit-transition: opacity 0.8s ease-in-out; 
 
    -moz-transition: opacity 0.8s ease-in-out; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 
@media(min-width: 321px) { 
 
    #menu > div: first-child { 
 
    opacity: 0; 
 
    } 
 
} 
 
#menuClose { 
 
    width: 35px; 
 
    height: 35px; 
 
    border: 2px solid rgba(255, 255, 255, 0.15); 
 
    border-radius: 35px; 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 15px; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 
#menuClose > span { 
 
    position: absolute; 
 
    top: 17.5px; 
 
    right: 0; 
 
    left: 7.5px; 
 
} 
 
#menuClose > span:first-child { 
 
    width: 20px; 
 
    height: 1.5px; 
 
    background: rgba(255, 255, 255, 1); 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    display: block; 
 
} 
 
#menuClose > span:last-child { 
 
    width: 20px; 
 
    height: 1.5px; 
 
    background: rgba(255, 255, 255, 1); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="button"></div> 
 
<div id="menu"> 
 
    <div>Close Menu</div> 
 
    <div id="menuClose"> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div>

也嘗試改變YOUE元標記

<meta name="viewport" content="width=device-width, height=device-height"> 

希望這有助於...

更新： ： che ck out移動部分的瀏覽器兼容性在這裏https://developer.mozilla.org/en-US/docs/Web/CSS/overflow