Модальное окно, запретить скролл всему документу на чистом JS
Добрый вечер.
Только изучаю JS, реализовал на чистом JS всплывающие окна с полным функционалом, но не могу запретить сролл всего документа во время скролла модального окна.
<style type="text/css">
.black_window {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
filter: alpha(opacity=0)
-moz-opacity: 0;
opacity: 0;
z-index: 2;
}
.content {
position: relative;
width: 60%;
max-width: 550px;
min-height: 300px;
margin: 0 auto;
z-index: 3;
filter: alpha(opacity=100)
-moz-opacity: 1;
opacity: 1;
}
</style>
<ul>
<li>Ссылка на 1 окно</li>
...
<li>Ссылка на последнее окно</li>
</ul>
<div class="size_window">
<div class="black_window">
<div class="content">Ссылка на 1 окно</div>
...
<div class="content">Ссылка на последнее окно</div>
</div>
</div>
.size_window - это высота всплывающего окна которую принимает div (.main_block), в который обернут весь сайт, когда модальное окно открыто, и ему я присваиваю overflow:hidden; .black_window - затемнитель фиксированный. .content - тело окна с высотой в зависимости от контента внутри. Скролить .content могу привязав к обработчику события скрола через свойство top, при position:relative блока content.
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
if(parseInt(window.getComputedStyle(main_block, null).height) - window.innerHeight - scrolled) > 0)){
content.style.top = -scrolled + 35 + 'px';
main_block.style.top = scrolled + 'px';
}
Когда скролл подходит к концу страницы, main_block уезжает вверх, не знаю как иначе запретить скролл основного контента на чистом JS |
TommyWork,
интересно, кто это сможет осилить ... ? но думаю где-то в mousewheel модального окна нужно добавить stopPropagation() |
body{
overflow: hidden; } |
e.stopPropagation(); не срабатывает, помогает e.preventDefault(); но тогда модальное окно тоже не скролится даже через отступы CSS
|
TommyWork,
а макет можно сделать? |
В смысле?
|
TommyWork,
как увидеть то что вы описали? |
function onWheel(e) {
var delta = e.deltaY || e.detail || e.wheelDelta;
if(delta > 0 ? this.scrollTop < this.scrollHeight - this.clientHeight : this.scrollTop > 0) {
this.scrollTop += 100 * (delta > 0 || -1);
e.preventDefault();
}
}
modal.addEventListener('wheel', onWheel);
modal.addEventListener('mousewheel', onWheel);
|
Ruslan_xDD,
вопрос: зачем нужна строка 3? |
| Часовой пояс GMT +3, время: 03:31. |