Форумы портала PHP.SU :: Версия для печати :: Как запретить вертикальную прокрутку страницы при грозонтальной прокрутке внутреннего div?

1. shurik_7866 - 28 Марта, 2016 - 08:57:19 - перейти к сообщению

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

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

CODE (html):
скопировать код в буфер обмена

 
<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>
 

CODE (javascript):
скопировать код в буфер обмена

<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>
 