Горизонтальный скролл jquery: Как сделать горизонтальный scroll на колесе мыши scroll?

Как создать горизонтально прокручиваемые контейнеры

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

<div>
<div><h3>Card</h3></div>
<div><h3>Card</h3></div>
<div><h3>Card</h3></div>
<div><h3>Card</h3></div>
<div><h3>Card</h3></div>
<div><h3>Card</h3></div>
<div><h3>Card</h3></div>
<div><h3>Card</h3></div>
<divclass="card"><h3>Card</h3></div>
</div>

Существует два способа сделать эти div горизонтально прокручиваемыми.

Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

  .card {
    flex: 0 0 auto;
  }
}

Для контейнера нужно отключить вертикальную прокрутку (overflow-y) и включить горизонтальную (overflow-x). Затем для каждой карточки установим display: inline-block, чтобы они отображались в строке.
Свойство CSS, с которым вы, вероятно, не встречались — это white-space: nowrap. Оно используется для управления тем, как текст переносится в контейнере. В данном случае мы хотим отключить перенос с помощью значения nowrap.

Flexbox также может выполнить эту работу.

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

  .card {
    flex: 0 0 auto;
  }
}

Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере.
Поддержка браузерами решения на основе flexbox лучше. Оно работает в IE и Edge.

В iOS веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место.
К счастью, эту проблему легко решить:

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}

Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:

По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.

.scrolling-wrapper {
&::-webkit-scrollbar {
    display: none;
  }
}

Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!

Данная публикация является переводом статьи «How To Create Horizontal Scrolling Containers» , подготовленная редакцией проекта.

Горизонтальный скролл становится модным. Разберемся в этом

В последнее время все более популярным становится подход в проектировании сайтов с использованием горизонтального скролла. Нас очень беспокоит целесообразность и юзабилити данного подхода. Чтобы разобраться в этом вопросе, мы перевели статью посвященную горизонтальному скроллу. Предлагаем ознакомиться с материалом и обсудить данную тему в комментариях…

Оригинальное название публикации: “Иск против горизонтального скролла”…

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

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

Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.

(http://www.guillaumejuvenet.com/)

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

Почему некоторые используют горизонтальный скролл

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

Ставка на мобильные устройства может быть не такой удачной идеей

Горизонтальное пролистывание в смарфотнах и планшетах уже не ново и довольно широко применяется благодаря своей простоте. Его использование на целом ряде различных устройств, часто объясняется более последовательным представлением контента. С другой стороны, на настольных компьютерах горизонтальная прокрутка встречается намного реже.

Основная причина этого уже была высказана выше. Люди не знают о том, что можно просматривать контент, просто прокручивая его как-то по-другому.

Поскольку экраны мобильных телефонов или планшетов и экраны десктопов считаются достаточно специфичными относительно друг друга, сходство здесь не применимо. Нельзя использовать горизонтальное пролистывание на настольном компьютере, просто потому что оно распространено на планшетах и телефонах.

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

Основным же недостатком в реализации горизонтальной прокрутки является то, что пользователи предпочитают не уникальные механики просмотра контента на странице, а единообразие в веб-интерфейсах.

Продуктивное использование вертикального пространства для контентной области

В вертикальном макете, весь контент вне зависимости от степени его важности, идёт друг за другом. Ключевую информацию можно выделить только оформлением, а не позиционированием на странице. Единственное что может дизайнер — разместить ключевую информацию в начале страницы.

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

Когда стоит использовать горизонтальный скроллинг, если вы это точно хотите

(http://qandhlondon.com/)

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

Мобильные версии “десктопных” сайтов, или веб-сайты, рассчитанные на просмотр с мобильных устройств — вот сфера применения, где горизонтальный скролл полностью уместен.

Проблема юзабилити

(http://movingislands.com/en)

Хотя множеству пользователей сегодня знакомо и даже привычно горизонтальное пролистывание (когда меняется всё наполнение страницы), горизонтальную прокрутку (с плавной подгрузкой контента) многие по-прежнему осуждают. Она продолжает получать отрицательные отзывы от многих пользователей, и поэтому применять ее следует с осторожностью. Ее, как правило, используют, чтобы проявить индивидуальность, например, заявить о торговой марке. Но даже при таком использовании, многим людям это непривычно.

Пользователи игнорируют блоки сайтов с горизонтальной прокруткой

Одна из основных реакций, которую вызывает горизонтальный скроллинг, заключается в игнорировании разделов с ним. Так как это провоцирует выход пользователя из его зоны комфорта.

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

(http://www.lorenzobocchi.com/)

Главным образом так происходит, потому что такая форма использования не соответствует ожидаемой схеме функционирования и в результате не является приемлемой или значимой.

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

Как же правильно?

(http://www.themobileplaybook.com/en-us/#/overview)

Что же делать, если вы все-таки хотите реализовать у себя на сайте горизонтальную прокрутку и не терять при этом пользователей? Все на самом деле просто — добавить дополнительные возможности навигации.

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

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

Что следует принимать во внимание

(http://www.richard-hill.org.uk/)

Хотя отношение к использованию горизонтальной прокрутки медленно меняется с приходом новых технологий, таких как сенсорные экраны, планшеты, ПК в форм-факторе моноблоков с тачскрином и т.д., данный метод все еще не доминирует.

В аналоговых клавиатурах легче манипулировать клавишами «вверх/вниз», чем «вправо/влево». А вот на тачпаде добавление новых жестов будет более удобным при реализации горизонтального скролла.

Скорость прокрутки также должна быть оптимизирована. Слишком быстрый скроллинг может вызвать головную боль, а слишком медленный может сильно раздражать.

Несмотря на тот факт, что мы привыкли читать слева направо, медленно прокручивая страницу вниз, эта привычка сейчас меняется. С появлением электронных книг и различных приложений для смартфонов, планшетов и тачпада, люди постепенно привыкают и к перелистыванию при чтении. Однако, всегда важно принимать во внимание, то с чем пользователи могут столкнуться при внедрении новых концепций в повседневную жизнь.

В заключении

(http://www.archi-graphi.fr/)

Раз горизонтальная прокрутка пришлась кстати на мобильных устройствах с тачскринами, это не значит, что она будет столь же популярной на десктопах. Не стоит «выходить за рамки» только для того, чтобы выделиться из толпы, но пробуйте, если действительно верите в такой подход. Однако даже в этом случае не упускайте из внимания комфорт пользователей, ибо это вы зависите от них, а не наоборот.

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

Переводчик: Аня, тестировщик
сервиса для дизайнеров (БЕЗ горизонтального скролла) Ahoba (;

Автор: 407th

Источник

Элемент.scrollLeft — Интерфейсы веб API

Свойство scrollLeft получает или устанавливает количество пикселей, на которое контент элемента прокручен влево.

Заметьте, что если свойство direction: rtl (right-to-left), то scrollLeft равен 0, когда скроллбар на его самой правой позиции (с начала прокрученного контента), а затем становится отрицательным по мере прокрутки к концу контента.

// Получаем количество прокрученных пикселей
var sLeft = element.scrollLeft;

sLeft — целое число, представленное количеством пикселей, на которые элемент был прокручен влево.

// Устанавливаем количество прокрученных пикселей
element.scrollLeft = 10;

scrollLeft может быть установлен, как любое целое число, однако:

• Если элемент не может быть прокручен (т.е. у него нет переполнения), scrollLeft устанавливается в 0.
• Если установили значение меньше 0 (больше 0 при расположении элементов справа налево), scrollLeft устанавливается в 0.
• Если установлено значение больше, чем максимум прокручиваемого контента, scrollLeft устанавливается в максимум.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #container {
            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
        }
        #content {
            background-color: #ccc; width: 250px;
        }
    </style>
    <script>
        document. addEventListener('DOMContentLoaded', function () {
            var button = document.getElementById('slide');
            button.onclick = function () {
                document.getElementById('container').scrollLeft += 20;
            };
        }, false);
    </script>
</head>
<body>
    <div>
        <div>Бла-бла-бла</div>
    </div>
    <button type="button">Пролистать</button>
</body>
</html>

Views scroll pager — пейджер с горизонтальным скроллом

Всем привет! Вчера наконец-то свершилось чудо, и я по-взрослому добрался до Drupal.org: завел в песочнице свой первый проект и стал членом ассоциации после внесения членских взносов – такой вот личный праздник.

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

Ссылка на проект: Views scroll pager.

Возможности модуля

• Модуль поддерживает Views с включенным AJAX;
• Модуль отлично справляется с несколькими пейджерами на странице;
• Пейджер по умолчанию растягивается на всю ширину контейнера блока;
• Поддержка стандартных настроек для Views Pager: Offset, Items to display, Pager ID;
• Корректная работа во всех современных браузерах. Поклонников IE7 огорчу – под это модуль пока не заточен.

Установка Views scroll pager

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

Views scroll pager зависит от Views и Libraries API, поэтому сразу устанавливайте данные модули. Подробно о том, как устанавливать модули я уже писал. Далее необходимо подключить библиотеку jScrollPane. Поступаем следующим образом:

• На сайте библиотеки, находим ссылочку на Github и переходим по ней;
• В правом сайдбаре должна быть кнопка «Download ZIP» для скачивания последней версии;
• Распаковываем архив и находим 2 файла: jquery.jscrollpane.css и jquery.jscrollpane.js;
• Создаем директорию «sites/all/libraries/jscrollpane» и помещаем туда файлы.

Теперь можно и включать модуль! Не поленитесь зайти на страницу «admin/reports/status» и убедиться, что библиотека подхватилась.

В случае возникновения проблем перечитайте еще раз процесс установки, и, если не поможет, обращайтесь ко мне. После включения модуля в настройках Views Pager вы сможете увидеть новую опцию Horizontal scroll pager.

Несколько советов

В качестве бонуса дам еще несколько рекомендаций, касательно данного модуля и работы с пейджерами в целом:

• Если у вас на странице несколько пейджеров, то не забудьте им присвоить уникальные Pager ID для возможности раздельной навигации по каждому из них;
• Если потребуется стилизовать пейджер по своему – дерзайте, только убедитесь, что ваш CSS подключается после моего, который лежит в модуле Views scroll pager;
• Для добавления стрелочки-иконки посредине полосы прокрутки нарисуйте иконку и добавьте следующий код в CSS.

.views-scroll-pager .jspHorizontalBar .jspDrag .jspDragLeft {
  background: url("path_to_image") no-repeat 50% 0; 
}

В моем случае тестировалась иконка 9×8 пикселей, за остальные не ручаюсь.

Вот собственно и все – пользуйтесь пока я добрый. Найдете баги – репортайте, возникнут вопросы – спрашивайте. Ну и отзывам я тоже буду рад 🙂

Для разработчиков рекомендую почитать также статью о том, как взаимодействовать со сторонними библиотеками в Drupal через Libraries API – именно так это реализовано в модуле Views scroll pager.

20 jQuery плагинов для создания анимации при скроллинге

В этой статье мы рассмотрим 20 лучших jQuery плагинов для создания анимации элементов сайта при прокрутке страницы. Подобные решения используются в веб-разработке довольно давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются, выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно — это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит — единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны, но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

Смотрите также:
14 JavaScript библиотек для создания анимации
Инструменты для создания HTML5 анимации
10 JavaScript библиотек для SVG анимации

WOW.js

ScrollMagic

Scrollme

Superscrollorama

onScreen

OnePage

FSVS

jInvertScroll

Waypoints

Scrollocue

Horwheel

Scrolling Progress Bar

multiScroll.js

browserSwipe.js

jQuery.panelSnap

Responsive 3D Fold Scroll

HorizonScroll.js

jQuery.scrollSpeed — Плавная прокрутка страницы

ScrollFlow

jQuery Air Sticky Block — липкий блок в сайдбаре

Плагин jQuery для удобной прокрутки

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

Об одном из таких плагинов мы и расскажем, называется он CustomScrollbar и используется для вертикальной и горизонтальной прокрутки содержания веб-ресурсов.

Предположим, вам нужно заказать лендинг, и необходимо создать красивую прокрутку для обычного блока html, для решения этой задачи CustomScrollbar подойдёт как нельзя лучше.

При изготовлении сайтов используется два вида прокрутки – вертикальная или горизонтальная, работает она, либо при прокрутке колесика мыши, либо при нажатии клавиш. Кроме того, важным моментом является, такой параметр как настройка скорости и высоты поля с ползунком для прокрутки.

CustomScrollbar — это плагин использующий jQuery UI, и настраиваемый при помощи CSS. Плагин имеет возможность устанавливать как вертикальную, так и горизонтальную прокрутку содержания веб-страницы. А благодаря jQuery mouse-wheel можно использовать поддержку прокрутки контента с помощью колесика мыши, сглаживание перемещения и настроить высоту и ширину полосы прокрутки.

Для работы плагина необходимо разместить в теге «head» сайта, включение файлов jquery.min.js, jquery-ui.min.js, jquery.easing.1.3.js (сглаживание перемещений содержимого), jquery.mousewheel.min.js (для поддержки перемещений колесиком мыши) и jquery.mCustomScrollbar.css, содержащий CSS для контента и панели прокрутки.

После этих манипуляций необходимо добавить в тег «head» разметку для блоков, в которых будет использоваться прокрутка.

С помощью разметки, содержание размещается внутри элемента «div» с классом «content». Кроме того, элемент «div» должен содержать уникальный «id» в каждом блоке, это нужно, чтобы можно было использовать несколько блоков с настраиваемой скроллинг панелью в одном документе.

Для горизонтальной прокрутки функцию mCustomScrollbar необходимо вызывать с параметром horizontalScroll:true. Это необходимо для автоматической установки общей ширины наполнения, без изменений в CSS или сложных вычислений для JavaScript.

В завершении, в конце документа, перед закрытием тега body, необходимо включить плагин jquery.mCustomScrollbar.js, а также функцию вызова и конфигурации скролл-панели.

Динамическая загрузка контента

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

Скрытие панелей прокрутки

Если вам нужно спрятать панели прокрутки, то помните, что скрывать их нужно только после вызова функции mCustomScrollbar. Такая строгая последовательность действий нужна для правильного вычисления скриптом ширины и высоты содержания.

Поддержка мобильных устройств

Одной из ключевых возможностей jQuery CustomScrollbar, является поддержка мобильных сенсорных устройств на операционных системах iOs и Android.Прокрутку можно настроить для каждого блока с помощью параметров:

• Тип прокрутки («vertical» или «horizontal»)
• Перемещения со сглаживанием (значение «0» — не используется)
• Тип сглаживания
• Дополнительное место снизу (только для вертикальной прокрутки, минимальное значение: «1»)
• Настройка высоты или ширины скроллинг-панели («auto» или «fixed»)
• Прокрутка колесиком мыши («yes» или «no»)
• Прокрутка клавишами («yes» или «no»)
• Скорость скроллинга (от «1» до «20»)

О недостатках

В jquery.min.js есть ошибка, которая сбрасывает значение анимации до «0» если оно больше, чем 9999 px. Эта ошибка не существенна, но если высота или ширина содержания равна или больше 10000 px, то ошибка вызывает рывки при прокрутке страницы, а это, согласитесь, портит впечатление от общего внешнего вида веб ресурса. Это уже известная ошибка, поэтому будем надеяться, что в следующих версиях библиотеки она будет исправлена. А до тех пор каждый разработчик находит своё, временное решение.

CSS3-переполнение

Модуль CSS Overflow содержит функции CSS для обработки прокручиваемого переполнения, отображаемого на визуальных носителях (экранах устройств). CSS использует термин переполнение для описания содержимого блока, которое простирается за пределы одного из его краев, т.е. края области содержимого, поля, границы или отступа.

Управление переполнением

Поддержка браузерами

IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-

1. Типы переполнения

Существует два типа переполнения, которое используется браузерами: переполнение эффектов рисования и прокручиваемое переполнение.

Первый тип переполнения представляет собой часть блока и его содержимое, которые создают визуальные эффекты за пределами рамки элемента. К визуальным эффектам относятся тень блока, рамки элемента, тень текста, нависающие глифы, контуры и т.д.

Прокручиваемое переполнение представляет собой набор элементов, выходящих за пределы области полей блока, для которых должен быть предусмотрен механизм прокрутки (полоса прокрутки, или скроллбар).

2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow

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

Свойство overflow-x определяет обработку переполнения в горизонтальном направлении (т.е. переполнение с левой и правой сторон блока), а свойство overflow-y определяет обработку переполнения в вертикальном направлении (т.е. переполнение с верхней и нижней сторон блока).

Свойства не наследуются.

Синтаксис

overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-y: auto;
overflow-x: inherit;
overflow-x: initial;

Свойство overflow — сокращенное свойство, которое задает значения overflow-x и overflow-y в указанном порядке. Если второе значение опущено, оно копируется из первого.

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed;. Текст может переполнять блок по высоте, изображения — по высоте и ширине.

Синтаксис

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: hidden scroll;
overflow: auto;
overflow: inherit;
overflow: initial;

3. Автоматическое многоточие

3.1. Многоточие при переполнении: свойство text-overflow

Свойство позволяет обрезать строчное содержимое в случае, когда оно не умещается в блок-контейнер, визуально обрезая его или отображая многоточием. Текст может переполниться, например, когда ему запрещается перенос, например, из-за white-space: nowrap или отдельное слово слишком длинное, чтобы уместиться.

Свойство работает только при задании следующих условий: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap. Применяется только к блочным контейнерам.

Свойство не наследуется.

Синтаксис

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: initial;
text-overflow: inherit;

По материалам CSS Overflow Module Level 3

10 демонстраций и подключаемых модулей с горизонтальной прокруткой jQuery

В сегодняшнем посте мы представляем вам 10 демонстраций и подключаемых модулей с горизонтальной прокруткой jQuery, полезных для тех, кто видит вещи горизонтально. Я думаю, мы должны согласиться с тем, что некоторые люди скроллируют в обе стороны! 🙂

Обновлено: март 2016 г. Обновлены все плагины и демоверсии до последних версий и добавлены новые. Также удалены плагины, которые больше не находятся в разработке.

ScrollMagic поможет вам легко реагировать на текущую позицию прокрутки пользователя.Его легкий вес (6 КБ в сжатом виде) и удобный для мобильных устройств. Он поддерживает оба направления прокрутки.

Посмотреть демонстрацию

jInvertScroll — это легкий плагин для jQuery, который позволяет перемещаться по горизонтали с эффектом параллакса при прокрутке вниз.

Посмотреть демонстрацию

3. Горизонтальная шкала времени

Из этого туториала Вы узнаете, как создать легко настраиваемую горизонтальную шкалу времени на основе CSS и jQuery.

Посмотреть демонстрацию

Из этого туториала Вы узнаете, как создать простой эффект плавной прокрутки с помощью подключаемого модуля jQuery Easing и всего лишь нескольких строк jQuery.

Посмотреть демонстрацию

simpleScroll — это гибкий скроллер содержимого jQuery с поддержкой сенсорного ввода. Он автоматически поддерживает элементы разного размера в режиме цикла.

Посмотреть демонстрацию

6. Горизонтальная прокрутка с fullPage.js

fullPage.js — это плагин на основе jQuery, который позволяет нам создавать одностраничные веб-сайты с прокруткой. Он работает не только во всех современных браузерах, но и в некоторых старых, таких как IE 8 и Opera 12.

Посмотреть демонстрацию

7.jQuery.kinetic

jQuery.kinetic — это простой плагин, который добавляет плавную прокрутку перетаскивания с постепенным замедлением в контейнеры.

Посмотреть демонстрацию

8. Хитрый

Sly — это библиотека JavaScript для однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену полосы прокрутки, как расширенный инструмент навигации на основе элементов или как отличный интерфейс навигации и анимации для веб-сайтов с параллаксом.

Посмотреть демонстрацию

9.pagePiling.js

pagePiling.js — это плагин jQuery, который помогает размещать ваши разделы один над другим и получать к ним доступ с помощью прокрутки или по URL-адресу. Он полностью совместим со старыми браузерами, такими как IE8 и Safari 12, а также отлично работает на мобильных устройствах.

Посмотреть демонстрацию

Из этого туториала Вы научитесь прокручивать веб-контент по вертикали, горизонтали и даже по диагонали! Не волнуйтесь, он не будет слишком полагаться на JavaScript. Он использует CSS / HTML для макета и JavaScript только для прокрутки.

Посмотреть демонстрацию

Заключение

В этой статье был рассмотрен список из 10 наиболее часто используемых демонстраций и подключаемых модулей горизонтальной прокрутки jQuery. Надеюсь, они пригодятся вам в ваших проектах. Знаете ли вы другие плагины, которые могут помочь? Что ты используешь? Не стесняйтесь делиться своими мнениями и предложениями в комментариях ниже.

15 лучших плагинов горизонтальной прокрутки jQuery

JQuery — это библиотека JavaScript, не имеющая собственного синтаксиса. JQuery, Prototype, Dojo, MooTools и многие другие библиотеки не могут считаться языком.Библиотека JQuery, используемая для упрощения перемещения по HTML-документу, анимации, обработки событий и взаимодействия с Ajax для быстрой разработки веб-сайтов. Он упрощает создание сценариев на стороне клиента для разработки приложений HTML и Web 2.0. Так же работает в нескольких браузерах.

JQuery — это метод, который мы используем для увеличения объекта-прототипа JQuery. Что ж, идея плагина в том, чтобы отлично справляться с набором элементов. Плагины горизонтальной прокрутки jQuery позволяют создавать горизонтальные спецэффекты для ваших веб-сайтов.В этой статье мы информируем вас о 15 плагинах горизонтальной прокрутки jQuery. С помощью этих плагинов вы можете прокручивать страницы и содержимое своего веб-сайта по горизонтали. Сайты выглядят красивыми и самобытными по сравнению с другими сайтами.

Плагины горизонтальной прокрутки jQuery настолько просты в использовании и интегрированы в ваши веб-сайты. Что ж, это помогает вам создавать анимированные эффекты для ваших веб-сайтов. Мы собрали здесь 15 плагинов горизонтальной прокрутки jQuery.

1. Волшебная прокрутка —

Scroll Magic необходим для использования полосы прокрутки так же, как и индикатора выполнения.

• Сначала вы запускаете анимацию в определенной позиции прокрутки.
• Затем вы можете синхронизировать анимацию с движением полосы прокрутки.
• Вы можете закрепить элемент в определенной позиции прокрутки.
• После этого вы можете закрепить элемент для частичного количества прогресса прокрутки.
• Просто добавьте эффект параллакса на свой веб-сайт.
• Создайте страницу с бесконечной прокруткой.

2. JInvertScroll —

JlnvertScroll — один из плагинов горизонтальной прокрутки jQuery.Это легкий плагин, который позволяет перемещаться по горизонтали с эффектом параллакса при прокрутке вниз. Это так просто настроить и не требует настройки.

3. Гладкая прокрутка Div —

Smooth Div Scroll для горизонтальной прокрутки содержимого вправо или влево. Он не ограничивает прокрутку на отдельные шаги. Что ж, плавность и ненавязчивость — вот ключ к успеху.

4. Хитрый —

Sly — один из плагинов горизонтальной прокрутки jQuery.Это однонаправленная прокрутка, основанная на поддержке навигации. Используется отличная навигация и простая замена полосы прокрутки.

5. jQuery SerialScroll —

Позволяет анимировать любую последовательность элементов, прокручивая их. Он просто использует jQuery.Scroll для получения анимации прокрутки.

6. js —

FullPage.js — один из плагинов горизонтальной прокрутки jQuery. Это простая разработка полноэкранных прокручиваемых веб-сайтов.

7. js —

HorizontalScroll.js позволяет веб-сайтам прокручиваться горизонтально влево или вправо.

8. jQuery Custom Content Scroller —

JQuery Custom Content Scroller имеет множество функций, поддержку колесика мыши, ускорение прокрутки и вертикальную / горизонтальную прокрутку.

9. NiceScroll —

NiceScroll — один из плагинов горизонтальной прокрутки jQuery, поддерживающий текстовую область, полосы прокрутки страницы документа, DIV и IFrames.Он поддерживает как горизонтальную, так и вертикальную полосу прокрутки.

10. Маленькая полоса прокрутки —

Tiny Scrollbar — это элегантный и приятный способ прокрутки контента на настольных или мобильных устройствах. Он просто спроектирован как легкая утилита.

11. Меню PageScroll —

PageScroll Menu — это целевая страница и одностраничный веб-сайт. Он обеспечивает плоскую анимацию прокрутки.

12. jQuery Kinetic —

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

13. Horwheel —

Horwheel — один из инструментов для горизонтальной прокрутки с помощью колеса мыши.

14. Optiscroll —

Optiscroll — это оптимизированная библиотека полос прокрутки. Он добавляет несколько пользовательских событий. Это метод расширения функциональных возможностей прокрутки браузера.

15. Perfect Scrollbar —

Perfect Scrollbar — это прокручиваемая область, которая работает как для горизонтальной, так и для вертикальной прокрутки.

10 подключаемых модулей jQuery с горизонтальной прокруткой — Bashooka

Вот 10 плагинов jQuery , которые помогут вам создать горизонтальное перемещение веб-страницы по экрану.

Это гибкий плагин jQuery для аккордеона. Создавайте горизонтальные и вертикальные аккордеоны с различными привлекательными темами и параметрами настройки.

Это легкий плагин jQuery, который включает эффект параллаксной прокрутки для выбранных элементов.

Это легкий плагин для jQuery, который позволяет перемещаться по горизонтали с эффектом параллакса при прокрутке вниз.Его очень легко настроить и почти не нужно настраивать.

Это библиотека JavaScript для расширенной однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену полосы прокрутки, как расширенный инструмент навигации на основе элементов или как отличный интерфейс навигации и анимации для веб-сайтов с параллаксом.

Это плагин jQuery, который упрощает выполнение функции при переходе к элементу.

Это плагин jQuery с динамической прокруткой, который может анимировать (прокручивать) контент автоматически или вручную, по горизонтали или вертикали, назад или вперед.

Этот плагин делает html-неупорядоченный список ul прокручиваемым, просто наведя на него указатель мыши.

Это плагин jquery, предназначенный для обучения и адаптации контента в соответствии с системой лифта.

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

Сегодня мы хотим показать вам, как создать горизонтальный макет с несколькими панелями содержимого. Идея состоит в том, чтобы сделать каждую панель индивидуально прокручиваемой и анимировать панель содержимого слева от области просмотра после ее нажатия или выбора в меню. Задача состоит в том, чтобы иметь дело с разными размерами области просмотра, что означает, что мы изменим макет, если экран недостаточно широк, чтобы его можно было размещать вертикально, а не горизонтально.

jQuery Центр горизонтальной прокрутки — JSFiddle

Редактор макета

Классический Столбцы Нижние результаты Правильные результаты Вкладки (столбцы) Вкладки (строки)

Консоль

Консоль в редакторе (бета)

Очистить консоль при запуске

Общие

Номера строк

Обернуть линии

Отступ с табуляцией

Подсказка по коду (автозаполнение) (бета)

2 пробела 3 пробела 4 пробела

По умолчанию: Sublime TextEMACS

По умолчаниюBigBiggerJabba

Поведение

Код автозапуска

Только код автозапуска, который проверяет

Код автосохранения (натыкается на версию)

Автоматически закрывать HTML-теги

Автоматически закрывающие скобки

Проверка действующего кода

Выделите совпадающие теги

Заглушки

Показывать панель шаблонов реже

15 подключаемых модулей горизонтальной прокрутки jQuery

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

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

Изучите список ниже.

Не пропустите —
20 подключаемых модулей jQuery для эффектов прокрутки
Лучшие учебники jQuery Parallax Scrolling

1.jInvertScroll

jInvertScroll — это легкий плагин для jQuery, который позволяет перемещаться по горизонтали с эффектом параллакса при прокрутке вниз. Его очень легко настроить и почти не нужно настраивать. Плагин весит менее 1 КБ и работает практически без настройки.

2. Свиток Magic

ScrollMagic — это плагин jQuery, который позволяет использовать полосу прокрутки как индикатор выполнения.
• Начать анимацию с определенной позиции прокрутки.
• Синхронизируйте анимацию с движением полосы прокрутки.
• Закрепить элемент в определенном положении прокрутки (закрепленные элементы).
• закрепить элемент для ограниченного хода прокрутки (закрепленные элементы).
• С легкостью добавьте эффект параллакса на свой веб-сайт.
• Создайте страницу с бесконечной прокруткой (загрузка дополнительного содержимого с помощью AJAX).

3. Хитрый

Sly — это библиотека JavaScript для расширенной однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену полосы прокрутки, как расширенный инструмент навигации на основе элементов или как отличный интерфейс навигации и анимации для веб-сайтов с параллаксом.Это достигается с помощью мощного и удобного для разработчиков API, который предоставляет множество очень полезных методов, дающих вам контроль над всем.
http://darsa.in/sly/

4. Гладкая прокрутка Div

Smooth Div Scroll — это плагин jQuery, который прокручивает контент по горизонтали влево или вправо. Smooth Div Scroll не ограничивает прокрутку отдельными шагами. За пределами скроллера нет других кнопок или ссылок, поскольку прокрутка выполняется с помощью горячих точек в области прокрутки, колеса мыши или с помощью автоматической прокрутки.Главное — ненавязчивость и плавность.

5. fullPage.js

fullPage.js — это плагин jQuery для простого создания полноэкранных прокручиваемых веб-сайтов. Он добавляет плавную прокрутку на одностраничный сайт с вертикальными и ландшафтными ползунками, образующими сайт. Совместим со старыми браузерами.

6. jQuery SerialScroll

Плагин jQuery SerialScroll позволяет легко анимировать любую серию элементов, последовательно прокручивая их. Он использует jQuery.ScrollTo для создания анимации прокрутки.Это плагин с очень неограниченными возможностями, который позволяет настраивать практически все извне. Вы можете использовать горизонтальную или вертикальную прокрутку, а также комбинированную.

Вы, конечно, можете использовать его как слайдер экрана. То есть для последовательной навигации по группе экранов. Этот плагин также может мгновенно оживить текстовый скроллер. Он определенно может обрабатывать слайд-шоу, высокая настраиваемость эффекта прокрутки позволяет создавать красивые анимации. Вы даже можете создать автоматическую ленту новостей!

7.Скроллер пользовательского содержимого jQuery

Плагин настраиваемой полосы прокрутки, использующий пользовательский интерфейс jquery, который полностью настраивается с помощью CSS. Он имеет вертикальную / горизонтальную прокрутку, поддержку колеса мыши (через плагин колеса мыши Brandon Aaron jQuery), ослабление прокрутки и регулируемую высоту / ширину полосы прокрутки.

8. HorizonScroll.js

HorizonScroll.js — это плагин jQuery, который позволяет веб-сайтам прокручивать влево и вправо по горизонтали.

9. NiceScroll

Nicescroll — это плагин jQuery для хороших полос прокрутки в очень похожем стиле ios / mobile.Он поддерживает DIV, IFrames, текстовое поле и полосы прокрутки страницы документа. Nicescroll настраивается и поддерживает как вертикальную, так и горизонтальную полосу прокрутки.

10. Меню PageScroll

PageScroll Menu — идеальное решение для одностраничных веб-сайтов и целевых страниц, но также может использоваться на многостраничных веб-сайтах. Обеспечивает плавную анимацию прокрутки при использовании со ссылками на странице (якорями). Он очень гибкий, содержит множество настраиваемых параметров в конфигурации, некоторые стили можно настраивать через файл CSS плагина.

11. Маленькая полоса прокрутки

Tiny Scrollbar — это красивый и элегантный способ включить прокрутку контента на мобильных и настольных устройствах. Он разработан как динамическая легкая утилита. Кроме того, он дает конструктору пользовательского интерфейса мощный способ улучшения пользовательского интерфейса (пользовательского интерфейса) веб-сайта.
Он может прокручивать как по вертикали, так и по горизонтали и поддерживает прокрутку колесиком, большим пальцем, дорожкой или касанием.

12. jQuery Kinetic

jQuery.kinetic — это простой плагин, который добавляет плавную прокрутку перетаскивания с постепенным замедлением в контейнеры.

13. Optiscroll

Optiscroll — это крошечная (9 КБ) и хорошо оптимизированная библиотека настраиваемых полос прокрутки для современных веб-приложений. Optiscroll стремится быть как можно более легким, чтобы не влиять на производительность вашего веб-приложения. Optiscroll не заменяет логику прокрутки JavaScript. Он скрывает только собственные полосы прокрутки и позволяет стилизовать поддельные полосы прокрутки по своему усмотрению. Кроме того, Optiscroll добавляет настраиваемые события и методы для расширения функций прокрутки браузера.

14.Хорвил

Horwheel — это компонент для горизонтальной прокрутки колесом мыши. Он совместим с несколькими браузерами.

15. Идеальная полоса прокрутки

Perfect-scrollbar — это крошечный плагин полосы прокрутки jQuery для любых веб-сайтов и прокручиваемой области. Работает как для вертикальной, так и для горизонтальной прокрутки.

Обнаружение горизонтальной прокрутки окна с помощью jQuery

Этот будет коротким и милым. Я работаю с полноэкранным приложением Silverlight с минимально поддерживаемым программным разрешением.Под «мягким» я подразумеваю, что приложение будет пытаться увеличиваться и уменьшаться, чтобы поместиться на экране; для слишком маленьких разрешений мы отказываемся сжиматься и дальше, а вместо этого заставляем браузер прокручивать, чтобы увидеть наши ручки любви.

Я использовал Binging (который полностью находится в словаре Microsoft Word! Потрясающе!) Для того, чтобы использовать jQuery для «определения», есть ли в браузере Chrome горизонтальная прокрутка. После долгого поиска по страницам я ничего не нашел. Поэтому я переключился на инструменты разработчика IE и использовал консоль сценариев для выполнения ряда операторов jQuery, пока я не смог надежно получить то, что искал.

Обычно, если документ шире, чем окно, хорошо бы видеть горизонтальные полосы прокрутки. Для моих целей у меня есть всплывающий div, который мне нужно расположить в центре экрана. Проблема заключалась в том, что наличие горизонтальной прокрутки мешало моим расчетам. (Div был правильно закреплен в середине окна, но поскольку элемент управления Silverlight за ним прокручивался вместе с документом, он отображался по центру только в том случае, если горизонтальная полоса прокрутки была продвинута точно наполовину.)

Вот код, который исправил это для меня. Смело берите то, что вам нужно:

Работает в IE 9 и FF 6 на ПК. Chrome по какой-то причине всегда сообщал, что документ и окно (и тело) имеют одинаковую ширину для моей страницы. Я не тестировал это на своем Mac, потому что в настоящее время мы не разговариваем.

Element.scrollLeft — веб-API | MDN

Элемент .scrollLeft свойство получает или устанавливает число пикселей, что содержимое элемента прокручивается от его левого края.

Если направление элемента равно rtl (справа налево), то scrollLeft — это 0 , когда полоса прокрутки находится в крайнем правом положении позиции (в начале прокручиваемого контента), а затем становится все более отрицательной, когда вы прокрутите до конца содержимого.

В системах, использующих масштабирование дисплея, scrollLeft может дать вам десятичную дробь. ценить.

Получение значения

 
var sLeft = element.scrollLeft;
  

sLeft — целое число, представляющее количество пикселей, которые Элемент прокручен от левого края.

Установка значения

 
element.scrollLeft = 10;
  

scrollLeft можно указать как любое целое число. Однако:

• Если элемент нельзя прокрутить (например, нет переполнения), scrollLeft установлено значение 0 .
• Если указано значение меньше 0 (больше 0 для элементы с направлением справа налево), scrollLeft устанавливается на 0 .