Горизонтальная прокрутка блока перетаскиванием мыши
Это небольшой 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
}
}
} );
Комментировать