Блок с горизонтальной прокруткой

Делаем секцию (блок) с горизонтальной прокруткой. Внутри предполагаются изображения, но может быть все что угодно. Данный блок можно использовать в лэндинге, либо таким образом вводить галерею изображений.

jQuery mousewheel plugin

Скрипт работает таким образом: назначаем блоку прокрутку с эффектами jQuery mousewheel, при наведении и скроллинге эффекты работают.

Скачиваем плагин jQuery mousewheel plugin.

Подключаем 2 скрипта и стиль (можно найти в плагине или сразу СКАЧАТЬ необходимое):

wp_enqueue_script( 'mousewheel', get_template_directory_uri() . '/js/jquery.mousewheel.min.js' , array( ), '1.0' , true );
wp_enqueue_script( 'mCustomScrollbar', get_template_directory_uri() . '/js/jquery.mCustomScrollbar.min.js' , array( ), '1.0' , true );

wp_enqueue_style( 'mCustomScrollbar', get_template_directory_uri() . '/css/jquery.mCustomScrollbar.min.css' , array( ), '1.0' );

Блок на который будем направлять действия скрипта не требует определенных стилей. Я использовал следующие:

#vertical {
    float: left;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Внутри блока размещается повторяющийся контент — изображения

#vertical img {
    float: left;
    height: 400px;
    width: auto;
}

Инициируем скрипт к определенному блоку.

$(window).load(function(){

$("#vertical").mCustomScrollbar({

	axis:"x",
	theme:"dark-thin",
	autoExpandScrollbar:true,
	autoHideScrollbar:true,
	contentTouchScroll:25,
	advanced:{autoExpandHorizontalScroll:true}
});

});

axis:»x» — горизонтальная прокрутка
theme:»dark-thin» — стиль полосы прокрутки
autoExpandScrollbar:true — показывать полосу прокрутки (при наведении)
autoHideScrollbar:true — скрывать полосу прокрутки
contentTouchScroll:25 — эффект листинга в мобильных устройствах (чем меньше число, тем меньше изображения прокручиваются)

В мобильной версии работает отлично. Есть множество вариантов оформления полоски скрола. Из минусов: отсутствует ScreenTouch и нет бесконечной прокрутки.

Smooth Touch Scroll

Еще одно решение по данной теме — Smooth Touch Scroll. Это более легковесная версия скрипта Smooth Div Scroll, о нем чуть ниже.

Подключаем скрипты, в данном случаем обязательно именно в такой последовательности!:

wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/js/jquery-ui-1.10.3.custom.min.js' , array( ), '1.0' , true );   
wp_enqueue_script( 'kinetic', get_template_directory_uri() . '/js/jquery.kinetic.min.js' , array( ), '1.0' , true );  
wp_enqueue_script( 'smoothTouchScroll', get_template_directory_uri() . '/js/jquery.smoothTouchScroll.min.js' , array( ), '1.0' , true );

Подключаем стили:

wp_enqueue_style( 'smoothTouchScroll', get_template_directory_uri() . '/css/smoothTouchScroll.css' , array( ), '1.0' );

И после этого запускаем скрипт:

$(document).ready(function() {
	$("#vertical").smoothTouchScroll({ 
	continuousScrolling: true
	});
});

Настроек здесь не много. continuousScrolling — бесконечность прокрутки.

Данный скрипт делает прокрутку Touch и в мобильной и в компьютерной версии. Из недостатков: отсутствие прокрутки колесом.

Smooth Div Scroll

Этот скрипт включает в себя полный набор функций:

• Прокрутка колесом
• Прокрутка Touch Screen (на компьютере)
• Бесконечная прокрутка
• Кнопки для прокрутки (при наведении)

Скачать скрипт можно здесь.

Включаем следующие скрипты:

wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/js/jquery-ui-1.10.3.custom.min.js' , array( ), '1.0' , true );  
wp_enqueue_script( 'mousewheel', get_template_directory_uri() . '/js/jquery.mousewheel.min.js' , array( ), '1.0' , true );  
wp_enqueue_script( 'kinetic', get_template_directory_uri() . '/js/jquery.kinetic.min.js' , array( ), '1.0' , true );  
wp_enqueue_script( 'smoothdivscroll', get_template_directory_uri() . '/js/jquery.smoothdivscroll-1.3-min.js' , array( ), '1.0' , true );

Подключаем стили CSS:

wp_enqueue_style( 'smoothDivScroll', get_template_directory_uri() . '/css/smoothDivScroll.css' , array( ), '1.0' );

Включаем скрипт:

$(document).ready(function () {
	$("#vertical").smoothDivScroll({
		mousewheelScrolling: "allDirections",
		manualContinuousScrolling: true,
		autoScrollingMode: "onStart",
		hotSpotScrolling: false,
		touchScrolling: true
	});
});

mousewheelScrolling: «allDirections» — включить прокрутку колесом (Варианты: vertical, horizontal, allDirections. !Но лучше ставить allDirections)
manualContinuousScrolling: true — бесконечная прокрутка
autoScrollingMode: «onStart» — автопрокрутка
hotSpotScrolling: false — скрыть/показать боковые кнопки прокрутки
touchScrolling: true — включить прокрутку Touch Screen

Для корректной работы в плагине содержится набор изображений — стрелок. Если они не нужны их нужно вычистить из файла smoothDivScroll.css.

Простой способ

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

Подключаем скрипт jquery.mousewheel.min и инициируем js на необходимый блок

$(function() {
  $("#horizont-scroll-test").mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 100);
  event.preventDefault();
  });
})

Свойства, чтобы блоки внутри контейнера выстраивались в ряд:

#horizont-scroll-test {height: 300px; overflow: hidden; white-space: nowrap;}

#horizont-scroll-test img {max-height: 300px; display: inline-block;}

Верстка: изображения внутри div с ID horizont-scroll-test (если верстать в редакторе — убирать переносы между изображениями).

Решение на чистом CSS

Стили CSS

.scrolling-wrapper {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	align-items: center;
}

.scrolling-wrapper .item {
    flex: 0 0 auto;
	width: 20%;
    padding: 15px;
}	
	
.scrolling-wrapper .item img {
    width: 100%;
    display: block;
}	
	
	
.scrolling-wrapper::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.scrolling-wrapper::-webkit-scrollbar-track {
	background-color: #4d4845;
	border-radius: 100px;
}

.scrolling-wrapper::-webkit-scrollbar-thumb {
	background-color: #b09354;
	border-radius: 100px;
}	
	
@media (max-width: 900px) { .scrolling-wrapper .item {width: 25%;} }
@media (max-width: 720px) { .scrolling-wrapper .item {width: 33.33%;} }
@media (max-width: 480px) { .scrolling-wrapper .item {width: 50%;} }
@media (max-width: 300px) { .scrolling-wrapper .item {width: 100%;} }

Глобальная горизонтальная прокрутка

Если весь сайт нужно сделать с горизонтальной прокруткой, то подойдет скрипт — jInvertScroll.

Поделиться в соц. сетях: