Полоса прокрутки jquery: Полоса прокрутки HTML

Содержание

10 плагинов jQuery для полос прокрутки

1. jScrollPane — пользовательские межбраузерные полосы прокрутки.

jScrollPane Келвина Лака была изначально разработана в декабре 2006. Это плагин jQuery, предоставляющий вам пользовательские полосы прокрутки, согласовано работающие со всеми современными браузерами. Вы можете видоизменять полосы прокрутки, используя простой CSS, но они прилично ухудшаться там, где JavaScript отключен.

2. Плагин jQuery — полоса прокрутки.

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

3. Крошечные полосы прокрутки — облегченный плагин jQuery.

Небольшие полосы прокрутки могут использоваться для просмотра контента. Данная программа разработана при использовании скрипта jQuery library. Это динамичная облегченная утилита, предоставляющая веб-разработчикам удобный метод улучшения пользовательского интерфейса сайта. Он может перемещаться горизонтально или вертикально, а также при помощи колесика, большого пальца, или курсора. Размер уменьшен до 2,29 kb.

4. jQuery скроллер пользовательского контента.

Скроллер пользовательского контента был разработан совместно с jquery и css, поэтому поддерживает работу с колесиком мышки, делая просмотр очень легким. Имеет полностью настраиваемую полосу прокрутки. Данный скрипт применяет jQuery UI и Brandon Aaron jquery плагины для колесика мышки. Очень прост для конфигурации и видоизменения при работе с css.

5. Замена полос прокрутки jQuery.

Данные полосы прокрутки совершенно видоизменяемы, их поведение, работа и дизайн полностью предсказуемы. Данный скрипт использует плагин ‘jquery.corner’ для привлекательных закругленных углов кросс браузера , а также плагин ‘jquery.drag’ для более надежного выполнения переходов.

6. Обои для полосы прокрутки.

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

7. Пользовательская полоса прокрутки для DIV.

Данный инструмент предоставляет HTML5 широкий диапазон изменения всех браузеров по вашему вкусу: как их поведения, так и дизайна. Этот небольшой плагин весит всего 2.2 Kb. Диапазон ввода в данном случае используется для контроля переходов по разделам. Немного больше кодировки и вы сможете получить сайт наподобие сайта Apple.

8. Короткий переход — полоса прокрутки jQuery UI в стиле Google Wave.

Джис Бейд разработал данную пользовательскую полосу прокрутки как мини-приложение jQuery UI после ознакомления с полосой прокрутки Google Wave, который увеличил функции и улучшил стиль полосы прокрутки по сравнению со стандартными браузерными полосами. Градация фона CSS3 предоставляет возможность изменения фона по вашему усмотрению. Таким образом, если вам необходима поддержка Internet Explorer и вы хотите создать сайт, радующий глаз, запланируйте создание ваших собственных фоновых изображений.

9. Скроллер jQuery.

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

10. Вертикальная полоса прокрутки с использованием jQuery UI.

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

Более 70 плагинов jQuery скроллинга для вашего сайта

Представляю огромный список плагинов прокрутки на jQuery для вашего сайта.  Различные трюки с прокруткой пришли к нам из-за рубежа не так давно и оцепили ряд современных порталов и сайтов, которые хотели выделиться. Работа над вертикальной прокруткой вполне может повысить конверсию и несомненно впечатление пользователя. Благодаря интересным подходам JS + CSS3 Вы можете улучшить интерфейс своего сайта. Если добавить немного фантазии, то можно из любого плагина получить что-то уникальное для своего сайта. Ведь каждый сайт старается выделиться из серой массы разными способами. Благодаря прокрутке, можно некоторые страницы перенести на страницу, с реализованным плагином, что улучшит получение важной информации пользователем. Данная технология лучше всего подойдет для различных портфолио или же демонстрации какого-либо продукта и т.д.

Переходим непосредственно к делу.

Sly

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

к содержанию ↑

Это плагин для определения пользовательских путей прокрутки.

к содержанию ↑

windows

Удобный, слабо связанный плагин jQuery для полноэкранных прокручивающих окон.

к содержанию ↑

AnimateScroll – это плагин jQuery, который позволяет вам прокручивать на любую часть страницы, просто вызывая функцию animatescroll () с идентификатором или классом элемента, на который вы хотите перейти.

к содержанию ↑

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

к содержанию ↑

stickUp

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

к содержанию ↑

Block Scroll – это плагин jQuery, который превращает набор элементов в блоки и отображает их по одному экрану за раз. Идея состоит в том, чтобы разбить вашу страницу на куски для лучшего представления и потока пользователей. Блокировка прокрутки автоматически изменяет вашу страницу.

к содержанию ↑

Создайте div в качестве фона … активируйте плагин; анимация при прокрутке. Плагин автоматически установит div, чтобы он работал невидимым.

к содержанию ↑

Плагин jQuery для создания прокручивающих презентационных колод

к содержанию ↑

Scrollocue – это плагин jQuery для создания простой системы autocue / teleprompter для прокрутки строк текста.

к содержанию ↑

Плагин jQuery для создания классных прокручиваемых материалов.

к содержанию ↑

Stellar.js

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

к содержанию ↑

Плагин jQuery для анимации прокрутки supercool.

к содержанию ↑

Parallax

Экспериментальный легкий JS-скрипт для облегчения быстрой анимации на основе прокрутки.

к содержанию ↑

Отзывчивая анимация 3D Fold на прокрутке плагина jQuery.

к содержанию ↑

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

к содержанию ↑

vivus.js

Vivus – это легкий класс JavaScript (без зависимостей), который позволяет вам анимировать SVG, давая им возможность рисования.

к содержанию ↑

slimScroll – небольшой (4.6KB) плагин jQuery, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки.

к содержанию ↑

jQRangeSlider

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

к содержанию ↑

jQuery.pin

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

jQuery.Pin здесь, чтобы помочь! Вставьте любой элемент в верхнюю часть контейнера. Легко отключите его для меньших размеров экрана, где нет места для такого рода махинаций.

к содержанию ↑

Оптимизированный для SEO бесконечный плагин прокрутки для jQuery.

к содержанию ↑

Overscroll – это плагин jQuery и polyfill для стиля прокрутки Safari mobile. Он предназначен для использования в настольных браузерах с последней версией jQuery.

к содержанию ↑

Упрощенная якорная анимация.

к содержанию ↑

JQuery и совместимый с amd плагин для создания эффекта параллакса, как показано на сайте spotify.com.

к содержанию ↑

fullPage.js

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

к содержанию ↑

Parallax.js

Библиотека для Javascript, которая позволяет легко параллаксировать страницы.

к содержанию ↑

Jarallax

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

к содержанию ↑

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

к содержанию ↑

Jquery fullContent.js

JQuery Full Content позволяет полностью создавать веб-сайты.

к содержанию ↑

jQuery One Page Scroll

Создайте веб-сайт со скроллингом на одной странице (веб-сайт iPhone 5S) с плагином прокрутки одной страницы.

к содержанию ↑

jQuery Parallax Plugin

jQuery Parallax – это сценарий, который имитирует эффект параллакса, как показано на nikebetterworld.com.

к содержанию ↑

jquery.parallax.js

Плагин parallax jQuery.

к содержанию ↑

jquery.arbitrary-anchor.js

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

к содержанию ↑

Portfoliojs

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

к содержанию ↑

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

к содержанию ↑

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

к содержанию ↑

Супер легкий и простой в использовании плагин parallax для jQuery.

к содержанию ↑

skrollr

Отдельная библиотека прокрутки параллакса для мобильных устройств (Android + iOS) и пк. Нет jQuery. Просто обычный JavaScript (и некоторая магия).

к содержанию ↑

SMINT

Smint – это простой плагин jQuery, который помогает при навигации на веб-сайтах с одной страницей.

к содержанию ↑

jQuery custom content scroller

Детально настраиваемый пользовательский плагин jQuery для прокрутки. Особенности включают в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесо мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного экрана, готовые к использованию темы и настройку с помощью CSS, поддержку направления RTL, параметры опций для полного управление функциями прокрутки, методы запуска таких действий, как прокрутка, обновление, уничтожение и т. д.

к содержанию ↑

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

к содержанию ↑

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

к содержанию ↑

jQuery panelSnap

Плагин jQuery, который обеспечивает функциональность привязки к набору панелей в вашем интерфейсе.

к содержанию ↑

isInViewport.js

Сверхлегкий плагин jQuery, который сообщает вам, есть ли элемент в окне просмотра с завихрением.

к содержанию ↑

Waterfall

Плагин jquery waterfall, такой как Pinterest, huaban.com, faxianla.com

к содержанию ↑

Плагин jQuery для замены в браузерах прокрутки по умолчанию.

к содержанию ↑

Анимированная прокрутка серии.

к содержанию ↑

jScroll – это плагин jQuery для бесконечной прокрутки, написанный Филиппом Клаузинским. Бесконечная прокрутка; также известная как ленивая загрузка, бесконечная прокрутка, автопир, бесконечные страницы и т. д.

к содержанию ↑

Экспериментальный плагин jQuery для прокрутки CSS 3D.

к содержанию ↑

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

к содержанию ↑

Создавайте разделенные страницы с двумя вертикальными панелями прокрутки. Совместимость с мобильными телефонами и устройствами и старыми баузерами, такими как IE 8.

к содержанию ↑

jQuery scrolling plugin by musings.it для прокрутки любого списка с любым контентом.

к содержанию ↑

qpScroll – это плагин jQuery, который создает фон параллакса для любой страницы или div. Его очень легко настроить. Он может быть добавлен на любую существующую страницу без необходимости изменения маркировки HTML.

к содержанию ↑

jQuery Stick ’em

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

Parallax.js

Parallax Engine реагирует на ориентацию смарт-устройства. Там, где нет оборудования для обнаружения гироскопа или обнаружения движения, вместо этого используется позиция курсора.

к содержанию ↑

Slinky.js

Slinky.js – это плагин jQuery для создания красивых списков навигации для прокрутки с заголовками штабелирования.

к содержанию ↑

Infinity.js

Infinity.js – это UITableView для Интернета: он ускоряет прокрутку по длинным спискам и сохраняет ваши бесконечные каналы бесперебойными и стабильными для ваших пользователей. Он небольшой, проверенный временем и высокоэффективный.

к содержанию ↑

Arbitrary Anchor

Этот плагин позволяет странице прокручивать любой произвольный объект на странице на основе селектора jQuery / CSS.

к содержанию ↑

Waypoints

Waypoints – это библиотека, которая упрощает выполнение функции всякий раз, когда вы переходите к элементу.

к содержанию ↑

jQuery.kinetic

Добавьте функциональность кинетической прокрутки в контейнер с помощью мыши или сенсорных устройств.

к содержанию ↑

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

к содержанию ↑

Smooth Div Scroll – это плагин jQuery, который прокручивает содержимое по горизонтали влево или вправо.

к содержанию ↑

jQuery Story Tale

CSS 3 Анимация запускается в прокрутке, но с твистом истории.

к содержанию ↑

pagePiling.js

pagePiling  – плагин от Alvaro Trigo. Создайте прокрутку огромного числа разделов.

к содержанию ↑

Простой плагин jQuery, расширяющий плагин animateScroll с возможностями одиночной страницы.

к содержанию ↑

Мобильный дружественный viewport активирует анимацию jQuery Plugin, используя greensock.

к содержанию ↑

Простая прокрутка элементов с помощью jQuery.

к содержанию ↑

Крошечный, но совершенный плагин прокрутки jQuery

к содержанию ↑

Автоматически проецирует одинаковые ссылки на страницы.

к содержанию ↑

Бесконечная прокрутка (или infinite scrolling) является популярным методом среди веб-сайтов 2.0, таких как Google Reader и Live Image Search, где вместо подкачки через элементы, используя традиционную технику разбиения на страницы, страница просто продолжает загружать новые элементы, прикрепленные к концу.

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

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

10+ плагинов jQuery Custom Scrollbar

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

Обновление 29.09.13: Добавлено 11. Плагин jQuery NiceScroll

Premium — VenScrollBar — плагин jQuery для полосы прокрутки

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

2. Пользовательская полоса прокрутки для DIV

Этот инструмент обеспечивает ввод диапазона HTML5 во все браузеры таким образом, что вы можете заставить его выглядеть и вести себя так, как вы хотите. Эта маленькая конфета весит всего 2,2 Кб. Здесь ввод диапазона используется для управления прокруткой DIV. Немного больше кодирования, и вы можете представить свои продукты, как это делает Apple.


Источник

3. Полоса прокрутки бумаги

Полоса прокрутки Бумага не заменяет полосу прокрутки браузера по умолчанию. Вместо этого он покрывает пользовательскую полосу прокрутки, например, бумагу на стене: именно поэтому она называется «Полоса прокрутки».


Источник

4. Замена полосы прокрутки jQuery

Эти полосы прокрутки полностью настраиваемы, что позволяет определить их поведение и внешний вид. Этот скрипт использует плагин «jquery.corner» для прекрасных закругленных углов в разных браузерах и «jquery.drag» для более надежной регистрации событий перетаскивания.


Источник

5. jQuery Custom Content Scroller

Пользовательский скроллер контента, созданный с помощью jquery и css, который поддерживает колесико мыши, упрощает прокрутку и имеет полностью настраиваемую полосу прокрутки Скрипт использует jQuery UI и плагин jquery Брэндона Аарона. Очень легко настроить и стилизовать с помощью CSS.


Источник

6. Tiny Scrollbar — легкий плагин jQuery

Крошечная полоса прокрутки может быть использована для прокрутки содержимого. Он был построен с использованием библиотеки JavaScript jQuery. Миниатюрная полоса прокрутки была разработана, чтобы быть динамической облегченной утилитой, которая дает веб-дизайнерам мощный способ улучшить пользовательский интерфейс веб-сайтов.


Источник

7. jScrollPane — пользовательские кросс-браузерные полосы прокрутки

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


Источник

8. Релиз: [плагин jQuery] Бесконечная прокрутка

(или бесконечная прокрутка) — это популярный метод среди сайтов Web 2.0, таких как Google Reader и Live Image Search, где вместо листания по элементам, использующим традиционный метод разбиения на страницы, страница просто загружается с новыми элементами, прикрепленными к концу.


Источник

9. jQuery Scroll Follow

Простой плагин jQuery, который позволяет объекту DOM следовать за страницей при прокрутке пользователя. Функция Scroll Follow была успешно протестирована в IE6, IE7, FF2, FF3, Safari 3 и Opera 9 в Windows. Он был успешно протестирован на FF3 и Safari 3 на MacOSX.


Источник

10. jQuery quickie: неограниченная прокрутка с помощью Twitter API

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


Источник

Плагин jQuery NiceScroll

Nicescroll очень мощный и очень настраиваемый, но приятный в использовании. Этот пример может работать на всех основных браузерах и мобильных устройствах.


Исходный Демо

Element.scrollHeight — Интерфейсы веб API

Свойство Element.scrollHeight (только чтение) — измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение scrollHeight  равно минимальному clientHeight, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.

Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте Element.getBoundingClientRect().

var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;

intElemScrollHeight — переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.

padding-top

Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

padding-bottom

Left Top Right Bottom margin-top margin-bottom border-top border-bottom

Определить, был ли элемент полностью прокручен.

Следующее выражение возвращает true, если элемент был прокручен до конца, false если это не так.

element.scrollHeight - element.scrollTop === element.clientHeight

Если объединить это выражение с событием onscroll, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства element.scrollTop и element.clientHeight). Например:

HTML

<form name="registration">
  <p>
    <textarea>
Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями:
- покупать kitekat бездомным;
- делиться последним куском мяса;
- любить Firefox;
- вставлять в каждую фразу: "мурр", "мррр" и т.п.;
- в качестве документов предъявлять хвост и усы;
- заниматься разработкой;
- читать хабрахабр;
- смотреть "Tom and Jerry" и котопса;
- продать почку для поддержания здоровья кошек города;
- уметь ловить мышей;
- быть фанатом Матроскина;
- обожать молоко;
- уметь мурлыкать и рррычать;
- следовать жизненным принципам Леопольда;
- вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа;
- загрузить в качестве аватарки фото с Простоквашино;
- другими словами, всегда любить и уважать кошек и ненавидеть собак.
Условия могут быть изменены в любое время, незнание не освобождает от ответственности.
    </textarea>
  </p>
  <p>
    <input type="checkbox" name="accept" />
    <label for="agree">Я согласен</label>
    <input type="submit" value="Далее" />
  </p>
</form>

CSS

#notice {
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 5px;
  width: 600px;
  padding: 5px;
  border: 2px #7FDF55 solid;
}

#rules {
  width: 600px;
  height: 130px;
  padding: 5px;
  border: #2A9F00 solid 2px;
  border-radius: 5px;
}

JavaScript

function checkReading () {
  if (checkReading.read) {
    return;
  }
  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
  checkReading.noticeBox.innerHTML = checkReading.read ? "Спасибо вам." : "Пожалуйста, прокрутите и прочитайте следующий текст.";
}

onload = function () {
  var oToBeRead = document.getElementById("rules");
  checkReading.noticeBox = document.createElement("span");
  document.registration.accept.checked = false;
  checkReading.noticeBox.id = "notice";
  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
  oToBeRead.onscroll = checkReading;
  checkReading.call(oToBeRead);
}
Браузеры Начальная версия
Internet Explorer 8.0
Firefox (Gecko) 3.0 (1.9)
Opera ?
Safari | Chrome | WebKit 4.0 | 4.0 | ?

В версиях Firefox до 21-й: когда контент элемента не создаёт вертикальную полосу прокрутки, его свойство scrollHeight равно значению clientHeight. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).

Изменение полосы прокрутки css | Gadget-apple.ru

Наверняка вы видели сайты с оригинальными полосами прокрутки. Это достигается с помощью нового CSS scroll свойства webKit-scrollbar . К сожалению, оно работает только в браузерах на движке WebKit . Но поддерживается jQuery почти во всех обозревателях. Давайте выполним стилизацию скроллбара.

Данное свойство поддерживается версиями Google Chrome для настольных компьютеров и мобильных устройств, Apple Safari , Flock , OmniWeb . Даже если вы создаете дизайн только для этих браузеров без использования jQuery , то сможете охватить только 72% пользователей интернета. Но если у вас нет аллергии на программирование, то можете быть уверены, что каждый ваш посетитель увидит красиво стилизованный скроллбар.

Стилизация скроллбара

Полосы прокрутки реализованы там, где длина контента превышает ширину окна контейнера. Благодаря этому вы получаете возможность стилизовать iframe , элементы div и поле ввода текста. В iframe и текстовой области окна браузеры автоматически добавляют полосу прокрутки в нижней части, когда содержимое выходит за пределы видимой области. Тем не менее, в контейнерах необходимо предоставлять дополнительную информацию для браузеров. Установка свойству overflow значения scroll говорит браузерам о том, что нужно выводить полосы прокрутки в случае переполнения окна контентом:

Это код scrolling CSS покажет полосу прокрутки такой (справа)

Использование псевдоэлементов CSS для настройки скроллбара

IE5.5 был первым браузером, поддерживающим основные стили для скроллинга. Используя свойство scrollbar-face-color , можно были изменить цвет полос прокрутки. Хотя это и не добавляло большого разнообразия, но все же лучше, чем стандартная полоса прокрутки в браузере. Поскольку это свойство по-прежнему поддерживается в Internet Explorer , его можно использовать для пользователей, предпочитающих этот браузер.

Для WebKit-браузерах в CSS существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.

  1. ::webkit-scrollbar — позволяет настроить ширину и цвет полосы прокрутки. Когда этот псевдоэлемент указан, WebKit выключает свой встроенный рендеринг скроллбара и использует настройки, указанные для div scroll CSS . Обратите внимание, что при этом будут выбраны все полосы прокрутки, присутствующие на странице. Если нужно настроить скроллбар для определенного элемента, необходимо применить это свойство к конкретному элементу:
  1. ::-webkit-scrollbar-thumb — Это ползунок скроллбара ( чем вы держите и прокручиваете страницу ). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:
  1. ::-webkit-scrollbar-track — позволяет настроить трек скроллбара ( путь движения ползунка ). Синтаксис псевдоэлемента для CSS scroll :
  1. ::-webkit-scrollbar-button — разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов ( или левого и правого для горизонтальных полос прокрутки ):
  1. ::-webkit-scrollbar-corner — позволяет справиться с ситуацией, когда появляются обе полосы прокрутки и пересекаются в углу:

Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS .

Настройка скроллбара с помощью Jquery

Если вам нравится программирование front-end , вы можете использовать Jquery-плагин JScrollPane . Он довольно прост в использовании. После того, как вы загрузили и подключили соответствующие файлы в заголовке документа, нужно вызвать одну Javascript-функцию для инициализации панели прокрутки. Вы можете легко изменить дизайн полосы прокрутки с помощью CSS или выбрать одну из существующих тем.

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

Если вы захотите изменить настройки CSS scroll по умолчанию, предоставленные JScrollPane , нужно редактировать стили соответствующих элементов:

Вывод

Пользовательские скроллбары больше не являются редкостью. Вы найдете их на большинстве сайтов и блогов. А с JScrollPane стало гораздо проще создавать и отображать стилизованные полосы прокрутки во всех браузерах. Надеюсь, этот урок оказался для вас полезным.

Данная публикация представляет собой перевод статьи « Scrollbar styling using CSS and Jquery » , подготовленной дружной командой проекта Интернет-технологии.ру

Дата публикации: 2018−12−24

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

К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров.

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью [email protected]

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

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

Я вставлю экземпляр здесь:

Автор: Chris Coyier

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Перевод: Влад Мержевич

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color , которые применялись к элементам с полосами прокрутки (вроде body ), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar ) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Необходимое

Разные части

Вот псевдоэлементы, отвечающие за разные части полос прокрутки.

Различные состояния

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

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

:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.

:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.

:decrement — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека уменьшена в процессе использования (вверх для вертикального скроллбара и влево для горизонтального).

:increment — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека увеличена в процессе использования (вниз для вертикального скроллбара и вправо для горизонтального).

:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.

:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.

:double-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка является частью пары кнопок, которые находятся вместе в конце скроллбара. Для видимой части трека сообщает, что она примыкает к паре кнопок.

:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.

:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.

:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.

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

Теперь всё вместе

Эти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.

Очень простой пример

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

И получим следующий результат на простом

В диких условиях

Отмечу очень тонкий и симпатичный скроллбар в блоге Тима Ван Дамма Maxvoltar (сайт Тима больше не использует этот дизайн).

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

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

НАШ САЙТ РЕКОМЕНДУЕТ:

Метки:  

gromo / jquery.scrollbar: jQuery CSS Настраиваемая полоса прокрутки

GitHub — gromo / jquery.scrollbar: jQuery CSS Настраиваемая полоса прокрутки

Этот репозиторий заархивирован владельцем. Теперь он доступен только для чтения.

Файлы

Постоянная ссылка Не удалось загрузить последнюю информацию о фиксации.

Тип

Имя

Последнее сообщение фиксации

Время фиксации

Кроссбраузерная настраиваемая полоса прокрутки CSS с расширенными функциями:

  • Простота внедрения
  • Без фиксированной высоты или ширины
  • Поддержка адаптивного дизайна
  • CSS настраиваемый
  • Стандартное поведение прокрутки
  • Вертикальная, горизонтальная или обе полосы прокрутки
  • Автоматически повторно инициализировать полосу прокрутки
  • Поддержка внешних полос прокрутки
  • Поддержка браузера: IE7 +, Firefox 1 , Opera, Chrome, Safari
  • Полоса прокрутки jQuery как угловая.Директива JS
  • Полоса прокрутки Textarea
  • Поддержка RTL 2
Базовая демонстрация полос прокрутки
Продвинутая демонстрация полос прокрутки
jQuery Scrollbar как директива Angular.JS
Документация
История изменений
Скачать

1 Известная проблема состоит в том, что встроенная полоса прокрутки браузера не может быть скрыта в Firefox на устройствах Apple, поэтому этот плагин не инициализируется, и вы увидите встроенные полосы прокрутки. 2 Экспериментальная поддержка в ветке master, стили полос прокрутки не обновляются

Около

Настраиваемая полоса прокрутки jQuery CSS

ресурсов

Лицензия

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

Лучшие 7 бесплатных пользовательских сценариев полосы прокрутки (плагины JavaScript и jQuery) для вашей веб-страницы

Полосы прокрутки являются одним из важнейших элементов пользовательского интерфейса браузера, который позволяет нам получать доступ к информации, которая не отображается. Таким образом, CSS упорно отказывался от многого, позволяя разработчикам стилизовать их внешний вид. Однако при использовании JavaScript небо становится пределом, заменяя пользовательский интерфейс полосы прокрутки пользовательским.Критики настраиваемых полос прокрутки выступают против внесения каких-либо радикальных изменений в такой важный и знакомый интерфейс, хотя, на мой взгляд, такой подход устарел. Можете ли вы представить себе Facebook на рабочем столе с уродливой родной полосой прокрутки вместо тонкой ненавязчивой полосы прокрутки, которая появляется только при наведении курсора на ленту статуса? В этом посте я подробно расскажу о 7 лучших бесплатных настраиваемых подключаемых модулях JavaScript и jQuery для полосы прокрутки в 2017 году, которые вы можете использовать для полной замены полосы прокрутки браузера по умолчанию, не жертвуя производительностью или удобством использования браузера на разных устройствах.

SimpleBar — эффективный JavaScript с вертикальной настраиваемой полосой прокрутки, который использует встроенную в браузере механику прокрутки при прокрутке и просто показывает настраиваемую полосу прокрутки поверх собственного пользовательского интерфейса. Он отключается на мобильных устройствах и устройствах с «плавающими» полосами прокрутки (например, трекпад MacBook), где он не нужен.

  1. Высокая производительность, поскольку сценарий не перезаписывает и не имитирует прокрутку браузера, а просто накладывает собственную полосу прокрутки на собственную.
  2. Отключается на мобильных устройствах и устройствах с «плавающими» полосами прокрутки (например, трекпад MacBook), где это не нужно.
  3. Работает в IE11 + и во всех других современных браузерах. IE10 может поддерживаться с некоторыми незначительными настройками.

В двух словах: Хороший сценарий для использования, если вам нужны только вертикальные настраиваемые полосы прокрутки и поддержка современных браузеров (IE11 +).

Демо Github

Perfect Scrollbar может и не быть идеальным, но приближается. Этот JavaScript позволяет добавлять настраиваемую полосу прокрутки к прокручиваемым элементам на странице (кроме элемента BODY) при наведении на нее курсора.Разработанный, чтобы быть максимально ненавязчивым, он никоим образом не изменяет исходные стили целевого контейнера, просто добавляя над ним настраиваемую полосу прокрутки. Любые изменения размеров контейнера учитываются автоматически (отлично подходит для адаптивного дизайна).

  1. Работает с jQuery или без него
  2. Работает с любым контейнером на странице с установленными свойствами CSS « позиция » и « переполнение: скрытый ».
  3. Поддерживаются как вертикальные, так и горизонтальные настраиваемые полосы прокрутки.
  4. Полоса прокрутки увеличивается при наведении курсора, чтобы ее было легче захватить.
  5. Никаким образом не изменяет стиль исходного контейнера, просто добавляет к нему полосу прокрутки.
  6. Автоматически подстраивается под изменения размеров контейнера.
  7. Идеально поддерживает RTL в браузерах на базе WebKit и Gecko.
  8. Поддерживает версию, размещенную в CDN, поэтому вам не нужно загружать основные файлы .js и .css.

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

Демо Github

Malihu поддерживает вертикальные / горизонтальные полосы прокрутки, импульс прокрутки, а также колесо мыши, клавиатуру и реакцию на прикосновение. Он поставляется с несколькими темами, чтобы легко экспериментировать с разными стилями. Этот плагин понравился браузеру и работает с широким спектром браузеров, включая IE8. Однако для работы требуется jQuery.

  • Требуется jQuery 1.6 или выше
  • Вертикальные и / или горизонтальные полосы прокрутки
  • Регулируемый импульс прокрутки
  • Колесо мыши, клавиатура и сенсорная панель
  • Готовые к использованию темы и настройка с помощью CSS
  • Поддержка направления RTL
  • Параметры опции для полного управления функциональностью полосы прокрутки
  • Методы для запуска таких действий, как прокрутка, обновление, уничтожение и т. Д.
  • Пользовательские обратные вызовы
  • Контент с возможностью выбора / поиска

В двух словах: Требуется jQuery 1.6. Множество готовых к использованию тем для тех, кто хочет легко дифференцировать свою настраиваемую полосу прокрутки. Поставляется с множеством событий прокрутки и действий для разработчиков.

Демо Github

Полоса прокрутки

jQuery проста в реализации и имеет целый список функций. Две примечательные особенности: настраиваемая полоса прокрутки может быть расположена за пределами целевого контейнера (см. Снимок экрана), а также добавлена ​​в текстовые поля (которые не поддерживаются многими другими аналогами).Он также поставляется с обширной поддержкой устаревших браузеров IE7 +, если вам это нужно.

  • Требуется jQuery
  • Без фиксированной высоты или ширины
  • Поддержка адаптивного дизайна
  • Вертикальная, горизонтальная или обе полосы прокрутки
  • Автоматически повторно инициализировать полосу прокрутки
  • Полосы прокрутки могут находиться вне целевого контейнера
  • Поддержка браузера: IE7 +, Firefox, Opera, Chrome, Safari
  • jQuery Scrollbar как директива Angular.JS
  • Поддержка текстового поля и полосы прокрутки документа
  • Поддержка RTL

В двух словах: Требуется jQuery.Полосы прокрутки могут отображаться вне контейнера прокрутки, а также использоваться для замены полосы прокрутки формы TEXTAREA. Поддержка устаревших браузеров IE.

Демо Github

NiceScroll 3 — это не очень тонкая настраиваемая полоса прокрутки, которая поставляется с множеством опций для точной настройки ее поведения на настольных и мобильных браузерах. Это один из немногих сценариев JavaScripts, который рекламирует свою способность заменять полосу прокрутки основного документа поверх окон iframe и текстовых областей для тех, кто действительно хочет сделать все возможное.Он также поставляется с уникальной функцией «масштабирования», которая позволяет пользователям расширять контейнер для прокрутки, чтобы заполнить всю страницу для удобства чтения.

  • Требуется jQuery (рекомендуется 1.8.3+)
  • Работает с IFrames, текстовым полем и полосами прокрутки страницы (тела) документа.
  • Полоса прокрутки очень похожа на собственные функции полосы прокрутки: перетаскивание, колесо мыши (скорость настраивается), навигация по клавиатуре (клавиши курсора, клавиши перехода вверх / вниз, клавиши возврата к началу / концу).
  • Функция масштабирования: прокручиваемое содержимое может расширяться до заполнения всей страницы
  • Режим прокрутки перетаскиванием с моментом прокрутки
  • Поддержка браузера: IE6 + и современные браузеры

В двух словах: Требуется jQuery.Может заменить основную полосу прокрутки документа для тех, кто хочет это сделать. Прокручиваемое содержимое можно развернуть, чтобы заполнить всю страницу, щелкнув элемент управления.

Демо Github

Baron — это небольшой сценарий настраиваемой полосы прокрутки, который использует встроенную прокрутку для оптимальной производительности и также может быть вложенным. Поддерживаются вертикальная, горизонтальная и двунаправленная прокрутка, а CSS можно использовать для полной настройки ее внешнего вида. Как и большинство настраиваемых полос прокрутки, которые мы перечисляем здесь, Baron просто скрывает системную полосу прокрутки, не удаляя ее.Это гарантирует, что прокрутка будет работать в любой системе.

  • Работает с jQuery или без него
  • Не заменяет встроенную механику прокрутки системы.
  • Настраиваемый дизайн полосы прокрутки с полной поддержкой CSS.
  • Может быть инициирован на скрытых блоках
  • Вертикальная, горизонтальная и двунаправленная прокрутка
  • Бесконечная прокрутка
  • Вложенные скроллеры
  • Поддержка браузера: IE6 +, современные браузеры

В двух словах: Может быть добавлен в скрытые контейнеры, а также вложен.Заголовки плагинов могут быть исправлены, когда пользователь прокручивает их.

Демо Github

И последнее, но не менее важное: для тех, кто работает с библиотекой React JavaScript, настраиваемые полосы прокрутки React — одна из лучших интегрированных настраиваемых полос прокрутки, ориентированных на React, для ваших веб-приложений. Установка осуществляется через диспетчер пакетов npm с помощью сборщика модулей, такого как Webpack или Browserify, для использования модулей CommonJS.

  • Удобная прокрутка в собственном браузере
  • Не заменяет собственные полосы прокрутки на мобильных устройствах
  • Работает как в клиентской, так и в серверной среде
  • запросAnimationFrame для 60fps
  • Нет необходимости использовать дополнительные стили из коробки
  • Хорошо протестировано, 100% покрытие кода

В двух словах: Наш лучший выбор для чистой настраиваемой полосы прокрутки на основе React, которая работает как на стороне клиента, так и на стороне сервера.

Демо Github

Заключение

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

javascript — прокрутка jQuery до элемента

Я установил модуль scroll-element npm, установил scroll-element .Работает это так:

  импорт {scrollToElement, scrollWindowToElement} из 'scroll-element'

/ * прокручиваем окно до вашего целевого элемента, продолжительность и смещение необязательны * /
пусть targetElement = document.getElementById ('мой-элемент')
scrollWindowToElement (targetElement)

/ * прокручиваем элемент контейнера переполнения до вашего целевого элемента, продолжительность и смещение необязательны * /
пусть containerElement = document.getElementById ('мой-контейнер')
пусть targetElement = document.getElementById ('мой-элемент')
scrollToElement (containerElement, targetElement)
  

Написано с помощью следующих сообщений SO:

Вот код:

  экспорт const scrollToElement = function (containerElement, targetElement, duration, offset) {
  if (duration == null) {duration = 1000}
  если (смещение == ноль) {смещение = 0}

  пусть targetOffsetTop = getElementOffset (targetElement).вершина
  пусть containerOffsetTop = getElementOffset (containerElement) .top
  пусть scrollTarget = targetOffsetTop + (containerElement.scrollTop - containerOffsetTop)
  scrollTarget + = смещение
  прокрутка (containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function (targetElement, duration, offset) {
  if (duration == null) {duration = 1000}
  если (смещение == ноль) {смещение = 0}

  пусть scrollTarget = getElementOffset (targetElement) .top
  scrollTarget + = смещение
  scrollWindow (scrollTarget, продолжительность)
}

функция scroll (containerElement, scrollTarget, duration) {
  пусть scrollStep = scrollTarget / (продолжительность / 15)
  let interval = setInterval (() => {
    если (containerElement.scrollTop  {
    if (window.scrollY  

10 подключаемых модулей jQuery для замены полос прокрутки браузера по умолчанию - Bashooka

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

Это плагин jquery для хороших полос прокрутки с очень похожим стилем ios / mobile.


Устали от полосы прокрутки по умолчанию? DZS Scroller jQuery - это лучшая полоса прокрутки для вашего сайта, которую вы можете очень легко настроить с помощью CSS, если трех включенных скинов недостаточно. Он также имеет расширенные функции, такие как прокрутка при наведении или исчезновение при отпускании мыши. И это работает на iPhone / iPad!


Библиотека

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


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


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


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


slimScroll - это небольшой (3,7 КБ) плагин jQuery, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки - аналогично той, которую недавно начали использовать Facebook и Google в своих продуктах. slimScroll не занимает визуального пространства, так как появляется только при наведении курсора мыши на пользователя. Пользователь может перетащить полосу прокрутки или использовать колесо мыши для изменения значения прокрутки.


jScrollPane - это кроссбраузерный плагин jQuery от Kelvin Luck, который преобразует полосы прокрутки браузера по умолчанию (на элементах с соответствующим свойством переполнения) в структуру HTML, которая может быть легко изменена с помощью CSS.


Вертикальная полоса прокрутки с использованием jQuery UI Slider - с дополнительной интеграцией колесика мыши. Поддержка нескольких слайдеров.


iScroll был создан в 2008 году, чтобы восполнить недостаток встроенной прокрутки в браузере мобильного веб-набора (в то время только для iPhone). Прошло время, мобильные браузеры становятся лучше, а скроллер javascript становится менее актуальным. Вот почему iScroll больше не просто скроллер для мобильных устройств, а кроссбраузерное решение для взаимодействия с элементами DOM.Теперь он поддерживает не только сенсорные события, но и указатели, нажатия клавиш, дистанционное управление и, конечно же, старую добрую мышь.


Top 7: Лучшие плагины javascript и jQuery для настраиваемой полосы прокрутки браузера

Полоса прокрутки - единственный компонент окна, который вы не можете настроить так, как хотите, с помощью css (по крайней мере, не в Firefox, например, Opera и т. Д.), Поэтому вы ' Мне нужно будет реализовать эту функцию с помощью Javascript.

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

Github | Демо

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

Он написан как ванильный микролибер Javascript и как плагин jQuery.

Браузер поддерживает разную поддержку плагина jQuery и простого микролиба Javascript.В частности, простой микролибер Javascript не поддерживает устаревшие браузеры, такие как IE6-8. Используйте выпуск плагина jQuery, если требуется поддержка этих браузеров.

  • Поддержка iOS и Android.
  • Доступен как плагин jQuery и как ванильный микролибер Javascript.
  • Поддержка AMD, Node, requirejs и commonjs.
  • Возможна вертикальная или горизонтальная прокрутка.
  • Поддерживает прокрутку колесиком, большим пальцем, дорожкой или касанием.
  • У него есть метод обновления, поэтому он может обрабатывать (асинхронно) изменения содержимого.
  • Размер дорожки и ползунка может быть установлен автоматически или на фиксированное значение.
  • Легко настраивается.
  • Поддерживает обычную прокрутку и обратную прокрутку в мобильном стиле.
  • Примеры можно увидеть на этой странице, загрузив zip-архив или здесь.
  • Легкий, компактный и чистый код.

Github | Демо

slimScroll - это небольшой (4.6 КБ) и настраиваемый плагин jQuery, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки - аналогично той, которую недавно начали использовать Facebook и Google в своих продуктах. slimScroll не занимает визуального пространства, так как появляется только при наведении курсора мыши. Пользователь может перетащить полосу прокрутки или использовать колесо мыши для изменения значения прокрутки.

Github | Демо

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

Github | Демо

jScrollPane - это кроссбраузерный плагин jQuery от Kelvin Luck, который преобразует полосы прокрутки браузера по умолчанию (на элементах с соответствующим свойством переполнения) в структуру HTML, которая может быть легко изменена с помощью CSS.

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

Github | Демо

perfect-scrollbar - это минималистичный плагин полосы прокрутки, который также работает с jQuery или обычным JavaScript.

  • perfect-scrollbar предъявляет некоторые требования, но не меняет и не добавляет никаких стилей к исходным элементам.
  • perfect-scrollbar не имеет ширины или высоты. Он закреплен на правой и нижней стороне контейнера.
  • Вы можете изменить почти все стили css полосы прокрутки. Дизайн полосы прокрутки не зависит от скриптов.
  • perfect-scrollbar поддерживает функцию «обновления». Когда вам нужно обновить размер или положение полосы прокрутки, просто обновите.
  • Кроме того, perfect-scrollbar использует scrollTop и scrollLeft, а не абсолютное позиционирование или что-то беспорядочное.
  • perfect-scrollbar отлично поддерживает RTL в браузерах на базе WebKit и Gecko.

Gtihub | Демо

Nicescroll 3 - это плагин jquery для хороших полос прокрутки с очень похожим стилем ios / mobile. Также поддерживает горизонтальную полосу прокрутки, простое в использовании решение для создания настраиваемых полос прокрутки, совместимых с десткопом, планшетами и телефонными устройствами. Он поддерживает div , iframe , текстовое поле и полосы прокрутки страницы (тела) документа.

  • Простая установка и активация, работает БЕЗ модификации вашего кода.
  • Очень стильные полосы прокрутки, которые не занимают ваше окно (оригинальные полосы прокрутки браузера занимают часть места на странице и уменьшают полезную ширину окна / div).
  • Вы можете стилизовать полосу прокрутки (тело) основного документа.
  • Во всех браузерах вы можете прокручивать: перетаскивание курсора, колесо мыши (скорость настраивается), навигацию с помощью клавиатуры (клавиши курсора, клавиши pagup / down, home / end).
  • Прокрутка плавная (как на современных планшетах), скорость настраивается.
  • Функция масштабирования.
  • Аппаратное ускорение прокрутки (если доступно).
  • Поддержка кадров анимации для плавной прокрутки и экономии ресурсов процессора.
  • режим перетаскивания прокрутки с моментом прокрутки (как сенсорное устройство).
  • Протестировано для всех основных настольных и мобильных версий браузеров.
  • Поддержка сенсорных устройств.
  • Поддержка устройств с несколькими входами (IE10 с MSPointer).
  • Совместим со многими другими браузерами, включая IE6, Safari на Mac и WP7 Mango.
  • Очень настраиваемый вид панели.
  • События нативной прокрутки пока работают.
  • Полностью интегрирован с jQuery.
  • Совместимость с jQuery UI, jQuery Touch, jQuery Mobile.

1. Полоса прокрутки jQuery

Github | Демо

Полоса прокрутки jQuery - это кросс-браузерная настраиваемая полоса прокрутки CSS с расширенными функциями:

  • Легко внедрить.
  • Нет фиксированной высоты или ширины.
  • Поддержка адаптивного дизайна.
  • CSS настраиваемый.
  • Стандартное поведение прокрутки.
  • Вертикальная, горизонтальная или обе полосы прокрутки.
  • Автоматически повторно инициализировать полосу прокрутки.
  • Поддержка внешних полос прокрутки.
  • Поддержка браузеров: IE7 +, Firefox 1 , Opera, Chrome, Safari.
  • jQuery Scrollbar как директива Angular.JS.
  • Полоса прокрутки Textarea.
  • Функция карты страницы.

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

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

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

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

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

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

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

SimpleBar

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

Получите 300+ бесплатных подарков на ваш почтовый ящик!

Подпишитесь на нашу рассылку и получите более 300 дизайнерских ресурсов в первые 5 минут подписки.

Спасибо!

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

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

Perfect ScrollBar

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

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

Этот плагин полосы прокрутки работает как с JQuery, так и без него. Вы можете настроить его для работы с любым контейнером, используя свойства CSS «position» и «overflow: hidden». Он поддерживает как вертикальные, так и горизонтальные настраиваемые полосы прокрутки.

Полоса прокрутки будет увеличиваться при наведении курсора, что позволяет пользователям легче ее брать. Он полностью поддерживает RTL в браузерах на базе WebKit и Gecko. Он также поддерживает версию, размещенную на CDN, поэтому вам не нужно беспокоиться о загрузке основных файлов .js и .css.

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

Плагин настраиваемой полосы прокрутки Malihu

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

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

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

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

Плагин полосы прокрутки jQuery

Объявление

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

Разумеется, для этого требуется jQuery. У него нет фиксированной высоты или ширины. Его другие функции включают поддержку отзывчивого дизайна, вертикальные полосы прокрутки, горизонтальные полосы прокрутки или даже то и другое, автоматическую повторную инициализацию полосы прокрутки и поддержку RTL. Он поддерживает IE7 +, Opera, Firefox, Chrome и Safari.

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

NiceScroll 3

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

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

Требуется jQuery 1.8.3+. Его функции очень похожи на собственные полосы прокрутки, включая такие функции, как перетаскивание, колесо мыши и навигация с помощью клавиатуры. Вы можете настроить скорость вращения колеса мыши. Существует режим прокрутки с перетаскиванием, в котором используется импульс прокрутки. Он поддерживает IE6 + и все современные браузеры.

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

Baron Native Scroll с настраиваемой полосой прокрутки

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

Работает как с jQuery, так и без него. Вы можете инициировать его на скрытых блоках. Он обеспечивает бесконечную прокрутку и позволяет добавлять вложенные полосы прокрутки. Он обеспечивает поддержку IE6 + и всех современных браузеров.

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

Пользовательские полосы прокрутки React

Это один из наиболее интегрированных плагинов настраиваемой полосы прокрутки для тех, кто работает с библиотекой React Javascript. Он сконцентрирован на React в дизайне. Установка выполняется с помощью пакета npm со сборщиком модулей, например Browserify или Webpack, что позволяет использовать модули CommonJS.

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

Это очень хорошо протестированный плагин полосы прокрутки. Он имеет 100% покрытие кода. Это отличный выбор для чистой настраиваемой полосы прокрутки на основе React. Он прекрасно работает как на стороне клиента, так и на стороне сервера.

Плагин jQuery Scrollbar, похожий на Facebook - slimScroll

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

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

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

Плагин внутренней полосы прокрутки jQuery с эффектом плавной прокрутки - Tween Scroller

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

Tinyscrollbar

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

Этот настраиваемый плагин полосы прокрутки написан как ванильный микролибер Javascript, а также как плагин jQuery. Поддержка браузером плагина jQuery и встроенного микролиба Javascript немного отличается.Микролибер Javascript не поддерживает устаревшие браузеры, такие как IE6-8. Вам нужно будет использовать версию плагина jQuery, если вам нужна поддержка этих браузеров.

Этот плагин полосы прокрутки также поставляется с поддержкой IOS и Android, а также с поддержкой AMD, Node, requires и commonjs. Он также поддерживает как горизонтальную, так и вертикальную прокрутку. У него есть метод обновления, который может обрабатывать (асинхронно) измененное содержимое.

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

Enscrollplugin

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

jScrollPane

Это кроссбраузерный плагин полосы прокрутки jQuery. Он был разработан Кельвином Лаком и преобразует полосы прокрутки браузера по умолчанию в структуру HTML, которая может быть легко изменена с помощью CSS. Это преобразование включает все элементы с соответствующим свойством оттока.

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

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

ползунок

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

GScroll

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

nanoScrollerJS

NanoScroller позволяет использовать полосы прокрутки в стиле MAC OS X Lion на веб-сайтах. Он использует встроенную прокрутку и будет работать с iPad, iPhone и даже некоторыми устройствами Android.

Поле для прокрутки

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

Свиток Фэнси

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

монетный двор Полоса прокрутки

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

Fakescroll

Это один из тех легких плагинов jQuery.Это хорошо для прокрутки длинного контента. Вы можете настроить полосу прокрутки с помощью CSS / CSS3, которая будет отображаться, когда пользователь наводит указатель мыши на контент.

Завершение мыслей о полосе прокрутки jQuery

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

Если вам понравилась эта статья о примерах полосы прокрутки jQuery, вам также следует прочитать эту статью:

Неограниченные загрузки : более 1 000 000 шрифтов, шаблонов InDesign, экшенов Photoshop, мокапов и ресурсов дизайна через

JQuery Scrollbar: лучшие плагины для использования

JQuery разработан, чтобы упростить использование JavaScript.Он объединяет многие строки кода Java в методы, которые можно вызывать с помощью одной строки кода. Библиотека JQuery предлагает следующие функциональные возможности - манипуляции с HTML / DOM, манипуляции с CSS, методы событий HTML, эффекты и анимацию, AJAX и утилиты. В jQuery есть плагины практически для любой мыслимой задачи. Сегодня мы познакомим вас с плагинами полосы прокрутки jQuery. Это промежуточный учебник по jQuery. Мы предполагаем, что у вас есть базовые знания HTML, CSS и JavaScript. Однако, если эти термины звучат как греческий или латинский, мы предлагаем вам сначала пройти наш базовый курс, который показывает, как HTML, CSS и Javascript объединяются для создания веб-страниц.Если вы уже знакомы с ними, вы можете сразу перейти к нашему курсу jQuery для начинающих.

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

Nicescroll

Nicescroll - это плагин jQuery для создания стильных полос прокрутки на настольных компьютерах и смартфонах. Этот плагин совместим со всеми настольными браузерами. Он также совместим с мобильными устройствами, такими как Ipad, iPhone iPod, Android, Blackberry и другими. Nicescroll также совместим со всеми сенсорными устройствами. У него очень простой процесс установки и активации. Этот плагин не требует каких-либо изменений существующего кода.Он предлагает поддержку аппаратного ускорения прокрутки. Он совместим с jQuery UI, jQuery touch и jQuery Mobile. Он может похвастаться сверхгладкой прокруткой с настраиваемой скоростью. Он использует кадр анимации для более плавной и экономной прокрутки. Nicescroll имеет простую в использовании функцию увеличения изображения, которая отображает выбранный контент в полноэкранном режиме.

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

Это элегантный плагин, который позволяет прокручивать контент как на мобильных, так и на настольных устройствах.Это легкий и динамичный виджет. Крошечная полоса прокрутки не требует никаких других внешних библиотек, таких как jQuery UI. Этот плагин легко настраивается и может прокручиваться по вертикали или горизонтали. Соответственно, он поддерживает прокрутку колесиком, большим пальцем, дорожкой или касанием. Его функция обновления может обрабатывать асинхронные изменения содержимого. Поддерживаются как IOS, так и Android. Размер дорожки и ползунка может быть установлен либо на автоматический, либо на фиксированное число. Наконец, этот полезный плагин поддерживает обычную прокрутку и обратную прокрутку в мобильном стиле.

jScrollPane

Этот полезный плагин jQuery был создан Кевином Лаком. Иногда очень удобно скрыть полосу прокрутки на веб-сайте и отображать ее только тогда, когда она нужна пользователю. jScrollPane позволяет легко это сделать. Полоса прокрутки появится, когда вы прокрутите содержимое, и она исчезнет через заранее заданное время, когда вы остановитесь. Полоса прокрутки не будет скрыта, если вы наведете курсор на контент. Например, лента активности в реальном времени в Facebook.

ScrollMagic

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

jQWidgets

jQwidgets совместим с широким спектром сенсорных и мобильных устройств.Этот плагин содержит платформу, которая автоматически определяет тип устройства, возможности и версию браузера. Фреймворк управляет внутренним поведением для оптимального рендеринга и лучшего взаимодействия с пользователем. Среди основных поддерживаемых браузеров для настольных компьютеров и мобильных устройств - Safari, Opera Mobile, Android, IE Mobile, Google Chrome, IE 7.0+, Firefox 2.0 и Opera 9.0+. Эти плагины созданы с нуля и имеют мощное ядро. Платформа поддерживает расширения и наследование виджетов, настройки виджетов, внутреннюю обработку и маршрутизацию событий, уведомления об изменении свойств, обнаружение и корректировку совместимости устройств и браузеров.Эти виджеты небольшого размера, имеют модульную конструкцию и созданы с учетом производительности. Отдельные виджеты могут быть загружены по запросу для экономии памяти. Каждый виджет оптимизирован для оптимального взаимодействия с пользователем на всех платформах.

Плагин jQuery для стилизации полос прокрутки

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

Подключаемый модуль RollBar

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

Вы можете просмотреть многие из этих подключаемых модулей и оценить, какой из них лучше всего соответствует вашим уникальным потребностям. У нас есть курс, который поможет вам лучше понять виджеты пользовательского интерфейса JQuery, и вы, возможно, захотите его изучить. Если вы разрабатываете специально для мобильных веб-сайтов, вы можете вместо этого изучить JQuery Mobile с помощью этого курса.Не забывай получать удовольствие, пока учишься!

Последнее обновление страницы: март 2014 г.

.

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

Ваш адрес email не будет опубликован.