Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2017, 22:44
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

Модальное окно, запретить скролл всему документу на чистом 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
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2017, 23:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,910

TommyWork,
интересно, кто это сможет осилить ... ? но думаю где-то в mousewheel модального окна нужно добавить stopPropagation()
Ответить с цитированием
  #3 (permalink)  
Старый 12.04.2017, 23:33
Новичок на форуме
Отправить личное сообщение для Zab_Juba Посмотреть профиль Найти все сообщения от Zab_Juba
 
Регистрация: 30.04.2016
Сообщений: 4

body{
overflow: hidden;
}
Ответить с цитированием
  #4 (permalink)  
Старый 13.04.2017, 01:28
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

e.stopPropagation(); не срабатывает, помогает e.preventDefault(); но тогда модальное окно тоже не скролится даже через отступы CSS
Ответить с цитированием
  #5 (permalink)  
Старый 13.04.2017, 01:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,910

TommyWork,
а макет можно сделать?
Ответить с цитированием
  #6 (permalink)  
Старый 13.04.2017, 09:40
Интересующийся
Отправить личное сообщение для TommyWork Посмотреть профиль Найти все сообщения от TommyWork
 
Регистрация: 12.04.2017
Сообщений: 15

В смысле?
Ответить с цитированием
  #7 (permalink)  
Старый 13.04.2017, 11:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,910

TommyWork,
как увидеть то что вы описали?
Ответить с цитированием
  #8 (permalink)  
Старый 13.04.2017, 11:09
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

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);
Ответить с цитированием
  #9 (permalink)  
Старый 13.04.2017, 11:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,910

Ruslan_xDD,
вопрос: зачем нужна строка 3?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно, открытием js RAPOS Элементы интерфейса 2 30.07.2013 09:55
Js scrollpane, постоянно виден скролл, как убрать? metaller92 jQuery 0 17.07.2013 11:23
Модальное окно на ajax Vladislav jQuery 1 27.03.2013 21:26
Передача данных из форм в модальное окно. andrey96 AJAX и COMET 5 16.11.2012 15:47
Подскажите как открыть модальное окно "fancybox" из скрипта js dgabets jQuery 1 18.02.2012 17:05