Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.03.2016, 10:50
Аспирант
Отправить личное сообщение для shurik_shink Посмотреть профиль Найти все сообщения от shurik_shink
 
Регистрация: 22.05.2015
Сообщений: 35

Как запретить прокрутку страницы при грозонтальной прокрутке внутреннего div?
Для div#album_list реализована горизонтальная прокрутка при прокрутке колесика миши

Но при горизонтальной прокрутке элементов div одновременно идет вертикальная прокрутка страницы.
Как запретить прокрутку страницы когда идет прокрутка div?

<style>
div#album_list{
	overflow-x: scroll;
	height: 225px;
	width: 800px;
	white-space: nowrap;
	background-color: red;
	border: 2px solid black;
	position: relative;
}
div.album{
	display: inline-block;
	background-color: blue;
	width: 200px; height: 200px;
	padding: 0px; margin: 0px; 
	border: none;
}
div.album_separator{
	display: inline-block;
	height: 200px; width: 20px;
	background-color: white;
	padding: 0px; margin: 0px;  
	border: none;
}
</style>
<br>1<br><br>1<br><br>1<br><br>1<br><br>1<br><br>1<br><br>1<br>
<div id='album_list'>
<div class="album">1</div><div class="album_separator">&nbsp;</div><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div>
</div>
<br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br><br>2<br>

<script>
        //Собственно сам скрипт выполняющий прокрутку div#album_list
	function scroll_albums(event) {
		var div = document.getElementById("album_list");
	    if ((event.wheelDelta || event.detail) > 0) //або 1 або 2 mousewheel для різних браузерів 
	    	div.scrollLeft -= 30;
	    else
	    	div.scrollLeft += 30;
	    return false;
	}
	
	var div = document.getElementById("album_list");
	if (div.addEventListener) {
		// IE9, Chrome, Safari, Opera
		div.addEventListener("mousewheel", scroll_albums);
		
		// Firefox
		div.addEventListener("DOMMouseScroll", scroll_albums);
	}
	else {
		// IE 6/7/8
		div.attachEvent("onmousewheel", scroll_albums);
	}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 26.04.2016, 16:50
Интересующийся
Отправить личное сообщение для Валес Посмотреть профиль Найти все сообщения от Валес
 
Регистрация: 16.04.2016
Сообщений: 11

В функции scroll_albums(event) нужно прописать "event.preventDefault();". Это должно остановить действия браузера по отношению к событию прокрутки колёсика.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматический старт при при горизонтальной прокрутке div блоков admin'ko Элементы интерфейса 3 13.02.2015 09:40
Исчезаение блока при прокрутке страницы gogogo Общие вопросы Javascript 3 28.12.2014 16:45
Как изменить поведение блоков при прокрутке? Szorstki Элементы интерфейса 11 30.11.2014 17:21
Как разделять страницы при выводе отчета ilshat Events/DOM/Window 7 10.12.2009 10:24
Как выдавать ошибку при сбросе загрузки страницы? AvaGet Общие вопросы Javascript 2 11.12.2008 19:04