Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как запретить прокрутку страницы при грозонтальной прокрутке внутреннего div? (https://javascript.ru/forum/events/62112-kak-zapretit-prokrutku-stranicy-pri-grozontalnojj-prokrutke-vnutrennego-div.html)

shurik_shink 25.03.2016 10:50

Как запретить прокрутку страницы при грозонтальной прокрутке внутреннего 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>

Валес 26.04.2016 15:50

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


Часовой пояс GMT +3, время: 02:09.