CSS/JQuery предотвратить прокрутку на определенном Div

Question

У меня есть этот HTML код:

<div class="parentDisable"></div> 
<div id="popup"> 
    <div class="karmalayer"> 
     <img src="<?php echo(IMG) ?>alpha-shadow.png"> 
     Thank you for visiting 
    </div> 
</div> 

со следующими атрибутами:

.karmawrapper { 
    position: absolute; 
    z-index: 10001; 
    width: 100%; 
} 

.karmalayer { 
    margin: 0 auto; 
    display: block; 
    background-color: #000; 
    width: 500px; 
    height: 300px; 
    border: 2px solid #337ab7; 
    color: #fff; 
    padding: 20px; 
    font-size: 18px; 
} 

.hlcolor { 
    color: #337ab7; 
} 

.karmalayer img { 
    margin: 0 auto; 
    display: block; 
} 

.parentDisable{ 
    position:fixed; 
    top:0; 
    left:0; 
    background:#000; 
    opacity:0.8; 
    z-index:10000; 
    height:100%; 
    width:100%; 
} 

#popup{ 
    position: absolute; 
    z-index:10001; 
    width: 100%; 
    display: none; 
    text-align: center; 
} 

Это должен «отключить» мой фон на открытии страницы и отображения всплывающее окно. Поскольку мой сайт уже загружается в фоновом режиме (и сайт довольно длинный), я хочу отключить функцию прокрутки. В принципе, до тех пор, пока пользователь находится в div popup, прокрутка не должна допускаться.

Я попытался решить эту проблему с JQuery, но это не сделать трюк:

$(document).bind('mousewheel', function (event) { 
    event.preventDefault(); 
    var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 
    init_scroll(event, delta); 
}); 

Любые идеи?

Answer 1

Чтобы содержимое не было прокручиваемым, оберните его в контейнер и установите переполнение скрытого. Контейнер нуждается в фиксированной высоте, поэтому установка абсолютного положения и высоты/ширины на 100% должна заполнять экран так, как вы обычно ожидаете содержание страницы. Это предотвратит появление полос прокрутки и предотвратит действие прокрутки по умолчанию. Проверьте, когда страница загрузилась, прежде чем показывать содержимое.

Кроме того, если ваша страница содержит столько контента, возможно, ее можно было бы разбить на несколько страниц? Или загружать контент с помощью ajax только тогда, когда пользователь прокручивает его.