Саша Бизиков

Дизайнер пользовательских интерфейсов в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

Горизонтальный скролл сайта

Мы привыкли к тому, что при прокрутке колёсика мышки сайт прокручивается с верху вниз. В этой ситуации разработчику не нужно задумываться о реализации дополнительного функционала, обеспечивающего удобство использования.

Когда мы делаем страницу, материал на которой располагается горизонтально, а не вертикально как это бывает обычно, то сталкиваемся с проблемой прокрутки страницы. Сейчас я опишу простой процесс реализации горизонтального скролла с использованием библиотеки jQuery и плагина mousewheel.js.

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

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src='/js/jquery.mousewheel.min.js'></script>

Инициализируем плагин:

$(function () {
    $("body").mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });
});

Коэффициент 30 можно настроить как будет удобнее. Чем больше значение, тем длиннее сколл. Строка event.preventDefault() предотвращает вертикальный скроллинг.

Ещё


  • Андрей

    Александр, огромное Вам спасибо!!!
    Простой, удобный скролл!!!