Для
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"> </div><div class="album"> </div><!--
--><div class="album_separator"> </div><div class="album"> </div><!--
--><div class="album_separator"> </div><div class="album"> </div><!--
--><div class="album_separator"> </div><div class="album"> </div><!--
--><div class="album_separator"> </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>
