Как исправить прокрутку меню холста?

У меня есть меню на холсте. Вы можете видеть, что когда меню открыто, вы можете прокручивать всю страницу как обычно. Но я хочу, когда меню открыто, вы не можете прокручивать любую другую часть страницы, а только меню. Как я могу это сделать?Как исправить прокрутку меню холста?

JsFiddle Example

<div class="soround"> 
    <div class="m-nav-container"> 
     <nav> 
      <p>content</p> 
      <p>content</p> 
      ... 
     </nav> 
    </div> 
    <div class="other"> 
    <button class="m-nav-opener">MENU</button> 
      <p>content</p> 
      <p>content</p> 
      ... 
    </div> 
</div>

источник

2015-07-09 Anonymous

Вы можете установить все контейнеры height:100% и установить overflow:hidden к <body> тега, когда открыто меню, таким образом, чтобы отключить прокрутку в области содержимого.

JSFIDDLE DEMO

$(function() { 
 
    $(".m-nav-opener").click(function() { 
 
     if ($("body").hasClass("m-nav-open")) { 
 
      $("body").removeClass("m-nav-open"); 
 
     } else { 
 
      $("body").addClass("m-nav-open"); 
 
     } 
 
    }); 
 
});

html, body, .soround { 
 
    height: 100%; 
 
} 
 
.m-nav-container { 
 
    background: silver; 
 
    position: fixed; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 100%; 
 
    left: -300px; 
 
    top: 0; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
.m-nav-open { 
 
    transform: translateX(300px); 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="soround"> 
 
    <div class="m-nav-container"> 
 
     <nav> 
 
      <p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p> 
 
     </nav> 
 
    </div> 
 
    <div class="other"> 
 
     <button class="m-nav-opener">MENU</button> 
 
     <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p> 
 
    </div> 
 
</div>

источник

2015-07-09 22:24:55 Stickers

спасибо большое –

Как исправить прокрутку меню холста?

ответ

Смежные вопросы