モバイルでDivの固定コンテンツを隠している

Question

サイトラッパーの背後に固定されたナビゲーションが構築されています。メニューリンクをクリックすると、サイトラッパーがスライドして固定メニューの内容が表示されます。タッチスクリーンで画面（サイトラッパー）を横にドラッグすると、固定されたコンテンツが表示されます。水平タッチを許可しないように画面をロックする方法はありますか？以下のコード。

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

HTML 

<ul class="navigation"> 
    <img src="img/splashRed.svg" alt="" /> 
    <li class="nav-item"><a href="#about">Who</a></li> 
    <li class="nav-item"><a href="#services">What</a></li> 
    <li class="nav-item"><a href="#approach">Approach</a></li> 
    <li class="nav-item"><a href="#clients">Clients</a></li> 
    <li class="nav-item"><a href="#contact">Contact</a></li> 
</ul> 

<input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
<label for="nav-trigger"></label> 

<div class="site-wrap"> <!--content--> 

CSS: 
body { 
    overflow-x: hidden; 
} 
.navigation { 
    width: 250px; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 0; 
    padding-top:10px; 
    list-style: none; 
    background: white; 
    padding:0; 
    margin:0; 
} 
.site-wrap { 
    height:100%; 
    min-height: 100%; 
    min-width: 100%; 
    max-width: 100%; 
    background-color: white; 
    position: relative; 
    top: 0; 
    bottom: 100%; 
    right: 0; 
    z-index: 1; 
} 
.nav-trigger { 
    position: fixed; 
    clip: rect(0, 0, 0, 0); 
} 
label[for="nav-trigger"] { 
    position: fixed; 
    right: 45px; top: 45px; 
    z-index: 2; 
    height:70px; 
    width: 70px; 
    cursor: pointer; 
    background-image: url("menuCircle.png"); 
    background-size: contain; 
} 
.nav-trigger + label, .site-wrap { 
    transition: right 0.2s; 
} 
.nav-trigger:checked + label { 
    right: 250px; 
} 
.nav-trigger:checked ~ .site-wrap { 
    right: 250px; 
} 

Answer 1

適切なメタとオーバーフローも使用しています。

多分あなたはこれを試すことができます。

body { 
    width:100% 
}