Показать сообщение отдельно
  #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>
Ответить с цитированием