/ Сайтостроение / Scripts & jquery / Блок с горизонтальной прокруткой

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

HIT

12.02.2017

2505

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

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.

Некорректная работа при небольшом количестве изображений (меньше ширины экрана)

Во всех вышеперечисленных вариантах на изображения можно ставить ссылку на оригинал, используя совместно с fancybox. !Но не во всех случаях корректно открывается ссылка.

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

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

Подключаем скрипт 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 (если верстать в редакторе — убирать переносы между изображениями).

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

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Плавный скроллинг колесом

Плавный скроллинг колесом

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом. Все это надо поместить в подвал: скрипт, инициализация скрипта. <script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script> <script> // Skroll-page $(document).ready(function() { //Chrome Читать далее »

Модальное окно на jquery

Модальное окно на jquery

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь. Принцип модального окна Вставляем в HEADER (выше всего контента), #backfon — это фон модального Читать далее »

/
Прокрутка страницы вверх и вниз

Прокрутка страницы вверх и вниз

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header. Вставляем в самый низ, перед wp_footer <p id="Go_Top"><a Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Блок с горизонтальной прокруткой
Fancybox
Рекомендации для васFancyboxOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.