Горизонтальная прокрутка блока перетаскиванием мыши

Это небольшой js-скрипт, который позволит делать прокрутку горизонтальных галерей картинок с помощью перетаскивания мышкой.

Кроме того он модифицирован, чтобы и клики на картинках тоже работали. Это может понадобиться для открытия картинок в большом формате для просмотра.

Вот собственно сам скрипт. Впишите свой селектор прокручиваемого блока и готово.

document.querySelectorAll( ".content-scroll" ).forEach( function( scroll ) {
    scroll.onmousedown = function( e ) {
        let pageX  = 0;
        let pageY0 = 0;
        let moved  = false;
      
        document.onmousemove = function( e ) {
            if ( pageX !== 0 ) {
                scroll.scrollLeft = scroll.scrollLeft + ( pageX - e.pageX );
            }
            pageX = e.pageX;
            moved = true;
        }
      
        // end drag
        scroll.onmouseup = function() {
            document.onmousemove = null;
            scroll.onmouseup = null;
            if ( moved ) {
                window.addEventListener( "click", captureClick, true );
            }
        }
      
        // disable browser drag
        scroll.ondragstart = function() {
            return false;
        }
        
        function captureClick( e ) {
            e.stopPropagation(); // Stop the click from being propagated.
            window.removeEventListener( "click", captureClick, true ); // cleanup
        }
    }
} );
Комментировать
Закрыть
Сумма:
0 ₽
После согласования условий заказа мы Вам отправим счёт или ссылку c удобным способом оплаты.
Оформить заказ