Css scroll snap
Содержание:
- Изображения
- Меню
- Больше
- Menus
- Свойства элемента ScrollBar
- Использование псевдоэлементов CSS для настройки скроллбара
- Настройка CSS-анимации с помощью ключевых кадров
- Методы, унаследованные от класса Control
- Элементы скроллбара
- Элемент управления ScrollBar
- Methods
- Pros and Cons of a Custom Scrollbar
- Options
- API
- Options
- Images
Изображения
Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений
Меню
Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок
Больше
Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME
Menus
Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header
Свойства элемента ScrollBar
Свойство | Описание |
---|---|
BackColor | Цветовое оформление элемента управления. |
Delay* | Время между последовательными событиями при удержании кнопки. |
ControlTipText | Текст всплывающей подсказки при наведении курсора на полосу прокрутки. |
Enabled | Возможность взаимодействия пользователя с элементом управления. True – взаимодействие включено, False – отключено (цвет стрелок становится серым). |
Height | Высота элемента управления. |
Left | Расстояние от левого края внутренней границы пользовательской формы до левого края элемента управления. |
Max | Максимальное значение свойства Value. |
Min | Минимальное значение свойства Value. |
Orientation** | Задает горизонтальную или вертикальную ориентацию элемента управления ScrollBar. |
SmallChange | Шаг изменения значения свойства Value. |
TabIndex | Определяет позицию элемента управления в очереди на получение фокуса при табуляции, вызываемой нажатием клавиш «Tab», «Enter». Отсчет начинается с 0. |
Top | Расстояние от верхнего края внутренней границы пользовательской формы до верхнего края элемента управления. |
Visible | Видимость элемента ScrollBar. True – элемент отображается на пользовательской форме, False – скрыт. |
Width | Ширина элемента управления. |
* По умолчанию свойство Delay равно 50 миллисекундам. Это означает, что первое событие (SpinUp, SpinDown, Change) происходит через 250 миллисекунд после нажатия кнопки, а каждое последующее событие – через каждые 50 миллисекунд (и так до отпускания кнопки).
** По умолчанию включена автоматическая ориентация, которая зависит от соотношения между шириной и высотой элемента управления. Если ширина больше высоты – ориентация горизонтальная, если высота больше ширины – ориентация вертикальная.
В таблице перечислены только основные, часто используемые свойства полосы прокрутки. Все доступные свойства отображены в окне Properties элемента управления ScrollBar.
Использование псевдоэлементов CSS для настройки скроллбара
IE5.5 был первым браузером, поддерживающим основные стили для скроллинга. Используя свойство scrollbar-face-color, можно были изменить цвет полос прокрутки. Хотя это и не добавляло большого разнообразия, но все же лучше, чем стандартная полоса прокрутки в браузере. Поскольку это свойство по-прежнему поддерживается в Internet Explorer, его можно использовать для пользователей, предпочитающих этот браузер.
Для WebKit-браузерах в CSS существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.
::webkit-scrollbar — позволяет настроить ширину и цвет полосы прокрутки. Когда этот псевдоэлемент указан, WebKit выключает свой встроенный рендеринг скроллбара и использует настройки, указанные для div scroll CSS
Обратите внимание, что при этом будут выбраны все полосы прокрутки, присутствующие на странице. Если нужно настроить скроллбар для определенного элемента, необходимо применить это свойство к конкретному элементу:
/* Для всех скроллбаров */ ::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; } /* Для определенных скроллбаров */ .mybox::-webkit-scrollbar { width: 12px; background-color: #434343; }
::-webkit-scrollbar-thumb – Это ползунок скроллбара (чем вы держите и прокручиваете страницу). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:
::-webkit-scrollbar-thumb { width: 8px; background-image: -webkit-linear-gradient(#F5F5F5, #8A8A8A); }
::-webkit-scrollbar-track – позволяет настроить трек скроллбара (путь движения ползунка). Синтаксис псевдоэлемента для CSS scroll:
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border: 1px solid black; background-color: #F5F5F5; }
::-webkit-scrollbar-button – разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов (или левого и правого для горизонтальных полос прокрутки):
::-webkit-scrollbar-button { background-color: #7c2929; }
::-webkit-scrollbar-corner – позволяет справиться с ситуацией, когда появляются обе полосы прокрутки и пересекаются в углу:
::-webkit-scrollbar-corner { background-color: #b3b3b3; }
Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS.
Настройка CSS-анимации с помощью ключевых кадров
Начнем с создания CSS-анимации, которая определяется ключевыми кадрами .
@keyframes wipe-enter { 0% { transform: scale(0, .025); } 50% { transform: scale(1, .025); } }
Анимацию можно назвать как угодно, пусть будет . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.
После того, как определены ключевые кадры, можно использовать анимацию для элемента, установив свойству название ключевых кадров: . Кроме этого необходимо установить — продолжительность анимации и — счетчик итераций, указывающий, сколько раз анимация должна воспроизводиться, например — бесконечно.
CSS-класс пусть будет заключён в медиа-запрос . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.
В этом примере будет анимирован HTML-элемент квадратной формы:
See this code CSS-animation width+height demo on x.xhtml.ru.
Для CSS-анимации можно использовать сокращённое написание свойства , например:
Методы, унаследованные от класса Control
Имя метода | Краткое описание | |
Метод addClass добавляет CSS-класс к компоненту. |
||
addEvent | Метод addEvent добавляет обработчик события на DOM-вершину. |
|
addEventHandler | Метод addEventHandler добавляет обработчик события на DOM-вершину. |
|
addEvents | Метод addEvents добавляет массив обработчиков событий на DOM-вершину. |
|
Метод addStateClass добавляет CSS-класс к компоненту и удаляет прежний CSS-класс. |
||
addStyleBySelector | Метод addStyleBySelector создает блок со стилем с указанным css-селектором. |
|
Метод addToNode добавляет компонент в указанную вершину. |
||
bindEvents | Метод bindEvents подписывает элемент на все стандартные события. |
|
Метод clearStylesCache очищает кэш стилей компонента. |
||
Метод getAnchorFlags возвращает JSON-объект с настройками текущей позиции компонента. |
||
Метод getClass возвращает текущие css-классы компонента. |
||
Метод getCssStyle возвращает стили для указанной вершины. |
||
Метод getDomNode возвращает главную DOM-вершину компонента. |
||
Метод getFocused определяет наличие фокуса у компонента. |
||
getFunctionByName | Метод getFunctionByName возвращает функцию по имени. |
|
getIsBinded | Метод getIsBinded возвращает признак подписи элемента на события DOM-вершины. |
|
Метод hasClass определяет, задан ли для корневой DOM-вершины элемента управления указанный CSS-класс. |
||
Метод hide скрывает элемент управления. |
||
Метод hideToolTip очищает таймаут появления подсказки и скрывает ее, если она был показана. |
||
Метод isResingNow определяет, изменяются ли в данный момент размеры компонента. |
||
refreshBindingProperty | Метод refreshBindingProperty обновляет привязанное свойство по имени. |
|
refreshItemsStyle | Метод refreshItemsStyle обновляет CSS-стили дочерних элементов. |
|
refreshStyle | Метод refreshStyle обновляет CSS-стили элемента. |
|
Метод removeClass удаляет CSS-класс из компонента. |
||
Метод removeEvent удаляет обработчик события у DOM-вершины. |
||
removeEventHandler | Метод removeEventHandler удаляет обработчик события DOM-вершины. |
|
removeFromDOM | Метод removeFromDOM удаляет вершину из DOM-структуры. |
|
Метод removeStateClasses удаляет CSS-классы компонента. |
||
Метод setDraggable устанавливает возможность перетаскивания компонента на html-странице. |
||
Метод setFocus устанавливает фокус компонента. |
||
Метод setIsHovered отображает компонент как при наведении на него курсора. |
||
Метод setIsPressed отображает компонент как при клике по нему. |
||
Метод setOpacityIE8 устанавливает значение прозрачности компонента в браузере InternetExplorer 8. |
||
Метод setSize устанавливает размеры компонента. |
||
Метод show отображает элемент управления. |
||
unBindEvents | Метод unBindEvents отписывает элемент от всех стандартных событий. |
|
Метод updatePosition корректирует размер и положение при абсолютном позиционировании на основе текущих параметров. |
||
Метод updateSize обновляет размеры компонента подгонке размеров контейнера, в котором находится компонент. |
Элементы скроллбара
Вы можете управлять отдельными элементами для кастомизации скроллбара:
- webkit-scrollbar — Все поле скроллбара.
- webkit-scrollbar-button — Кнопки скрола вверх и вниз (зачастую имеет иконки в виде стрелок).
- webkit-scrollbar-track — Трек поля по которому передвигается ползунок скролла.
- webkit-scrollbar-track-piece — Свободное место на треке (которое не занято ползунком).
- webkit-scrollbar-thumb — Сам ползунок.
- webkit-scrollbar-corner — Угол на скроллбаре, на котором как правило пересекаются вертикальный и горизонтальный скроллбар.
- webkit-resizer — Если ваш скроллбар поддерживает изменение размера поля к которому он прикреплен, можете кастомизировать этот элемент.
#
Элемент управления ScrollBar
UserForm.ScrollBar – это элемент управления пользовательской формы, представляющий из себя полосу прокрутки с кнопками, реагирующий как на перемещение ползунка, так и на нажатие кнопок.
Элемент управления ScrollBar предназначен в VBA Excel для ввода пользователем числовых данных, которые ограничены минимальным и максимальным значениями. Увеличение или уменьшение значения полосы прокрутки осуществляется с указанным шагом при помощи ползунка или кнопок.
Визуально, элемент управления ScrollBar состоит из полосы прокрутки и двух кнопок, работающих аналогично кнопкам элемента управления SpinButton. Ориентация может быть горизонтальной или вертикальной в зависимости от настроек.
Полоса прокрутки в VBA Excel используется в паре с элементом управления TextBox или Label. Вспомогательный элемент необходим, чтобы отобразить текущее значение ScrollBar на пользовательской форме.
Methods
Click on the method name to open a more detailed documentation.
Instance methods:
name | description |
---|---|
Returns or sets the options of the instance. | |
example(s):
//get options var options = instance.options(); //set options instance.options({ className : null }); |
|
Updates the instance. | |
example(s):
//soft update instance.update(); //hard update instance.update(true); |
|
Disables every observation of the DOM and puts the instance to «sleep». This behavior can be reset by calling the method. | |
example(s):
//put the instance to sleep instance.sleep(); |
|
Returns the scroll information or sets the scroll position. | |
example(s):
//get scroll information var scrollInfo = instance.scroll(); //scroll 50px on both axis instance.scroll(50); //add 10px to the scroll offset of each axis instance.scroll({ x : "+=10", y : "+=10" }); //scroll to 50% on both axis with a duration of 1000ms instance.scroll({ x : "50%", y : "50%" }, 1000); //scroll to the passed element with a duration of 1000ms instance.scroll($(selector), 1000); |
|
Stops the current scroll-animation. | |
example(s):
//scroll-animation duration is 10 seconds instance.scroll({ y : "100%" }, 10000); //abort the 10 seconds scroll-animation immediately instance.scrollStop(); //scroll-animation duration is 1 second instance.scroll({ y : "100%" }, 1000); |
|
Returns all relevant elements. | |
example(s):
//get the element to which the plugin was applied var pluginTarget = instance.getElements().target; |
|
Returns a object which describes the current state of this instance. | |
example(s):
//get the state of the plugin instance var pluginState = instance.getState(); |
|
Destroys and disposes the current instance and removes all added elements form the DOM. | |
example(s):
//destroy the instance instance.destroy(); |
|
Returns the instance of a certain extension of the current plugin instance. | |
example(s):
//get the instance of the extension "myExtension" var extensionInstance = instance.ext("myExtension"); |
|
Adds a extension to the current instance. | |
example(s):
//add the registered extension "myExtension" to the plugin instance var extensionInstance = instance.addExt("myExtension"); |
|
Removes a extension from the current instance. | |
example(s):
//add the registered extension "myExtension" to the plugin instance instance.addExt("myExtension"); //remove the added extension "myExtension" from the plugin instance instance.removeExt("myExtension"); |
Global methods:
name | description |
---|---|
Returns or Sets the default options for each new plugin initialization. | |
example(s):
//get the current defaultOptions var defaultOptions = OverlayScrollbars.defaultOptions(); //set new default options OverlayScrollbars.defaultOptions({ className : "my-custom-class", resize : "both" }); |
|
Returns a plain object which contains global information about the plugin and each instance of it. | |
example(s):
//get the global information var globals = OverlayScrollbars.globals(); |
|
Registers, Unregisters or returns extensions. | |
example(s):
//register a dummy extension with the name "myExtension" OverlayScrollbars.extension("myExtension", function() { return { }; }); //unregister the extension with the name "myExtension" OverlayScrollbars.extension("myExtension", null); //get the extension-object with the name "myExtension" var registeredExtension = OverlayScrollbars.extension("myExtension"); //get all registered extension-objects var extensionObjects = OverlayScrollbars.extension(); |
|
Checks whether the passed object is a non-destroyed OverlayScrollbars instance. | |
example(s):
//create OverlayScrollbars instance var osInstance = OverlayScrollbars(document.body, { }); //returns true OverlayScrollbars.valid(osInstance); //destroy the instance osInstance.destroy(); //returns false OverlayScrollbars.valid(osInstance); //returns false OverlayScrollbars.valid({ }); |
Pros and Cons of a Custom Scrollbar
Before jumping into the code, I think it’s worth looking at some potential tradeoffs that come with creating a custom scrollbar for your website or app.
The upside is that it can give your website a chance to standout compared to the millions of websites using the browser default scrollbar. Anything that can make your website even a little bit more memorable to visitors will benefit you long term.
On the other hand, many UI designers believe that you should never interfere with «standardized» UI components like the scrollbar. If you modify your scrollbar too much, it may confuse people using your website or app.
If you are doing this for your own personal website you probably don’t need to worry about it as long as you like how it looks.
On the other hand if you are thinking about implementing a custom scrollbar at work or some project where you want to make money, you should try A/B testing and make a data driven decision based on the results.
At the end of the day most of us are writing code to drive revenue for a business, so you always need to keep that in mind.
Options
option | type | default | description | |
---|---|---|---|---|
className | string / null | The class name which shall be added to the host element. | ||
resize | string | The resize behavior of the host element. This option works exactly like the CSS3 resize property. | ||
sizeAutoCapable | boolean | Indicates whether the host element is capable of «auto» sizes such as: and . | ||
clipAlways | boolean | Indicates whether the content shall be clipped always. | ||
normalizeRTL | boolean | Indicates whether RTL scrolling shall be normalized. | ||
paddingAbsolute | boolean | Indicates whether the padding for the content shall be absolute. | ||
autoUpdate | boolean / null | Indicates whether the plugin instance shall be updated continuously within a update loop. | ||
autoUpdateInterval | number | The interval in milliseconds in which a auto update shall be performed for this instance. | ||
updateOnLoad | string / array / null | Selectors of which the elements event shall be handled by the plugin. Thats means OverlayScrollbars will trigger a automatic update if a element with a matching selector emits a event. Per default OverlayScrollbars will update automatically if a element loads. | ||
nativeScrollbarsOverlaid : { | ||||
showNativeScrollbars | boolean | Indicates whether the native overlaid scrollbars shall be visible. | ||
initialize | boolean |
Indicates whether the plugin shall be initialized even if the native scrollbars are overlaid. If you initialize the plugin on the body element, I recommend to set this option to false. |
||
} | ||||
overflowBehavior : { | ||||
x | string | The overflow behavior for the x (horizontal) axis. | ||
y | string | The overflow behavior for the y (vertical) axis. | ||
} | ||||
scrollbars : { | ||||
visibility | string | The basic visibility of the scrollbars. | ||
autoHide | string | The possibility to hide visible scrollbars automatically after a certain action. | ||
autoHideDelay | number | The delay in milliseconds before the scrollbars gets hidden automatically. | ||
dragScrolling | boolean | Defines whether the scrollbar-handle supports drag scrolling. | ||
clickScrolling | boolean | Defines whether the scrollbar-track supports click scrolling. | ||
touchSupport | boolean | Indicates whether the scrollbar reacts to touch events. | ||
snapHandle | boolean | Indicates whether the scrollbar handle-offset shall be snapped. | ||
} | ||||
textarea : { | ||||
dynWidth | boolean | Indicates whether the textarea width will be dynamic (content dependent). | ||
dynHeight | boolean | Indicates whether the textarea height will be dynamic (content dependent). | ||
inheritedAttrs | string / array / null | During initialization: Attributes which the generated host-element shall inherit from from the target textarea-element.During destruction: Attributes which the target textarea-element shall inherit from from the generated host-element. | ||
} | ||||
callbacks : { | ||||
onInitialized | function / null | Gets fired after the plugin was initialized. It takes no arguments. | ||
onInitializationWithdrawn | function / null | Gets fired after the initialization of the plugin was aborted due to the option . It takes no arguments. | ||
onDestroyed | function / null | Gets fired after the plugin was destryoed. It takes no arguments. | ||
onScrollStart | function / null | Gets fired after the user starts scrolling. It takes one argument. | ||
onScroll | function / null | Gets fired after every scroll. It takes one argument. | ||
onScrollStop | function / null | Gets fired after the user stops scrolling. It takes one argument. | ||
onOverflowChanged | function / null | Gets fired after the overflow has changed. It takes one argument. | ||
onOverflowAmountChanged | function / null | Gets fired after the overflow amount has changed. It takes one argument. | ||
onDirectionChanged | function / null | Gets fired after the direction has changed. It takes one argument. | ||
onContentSizeChanged | function / null | Gets fired after the content size has changed. It takes one argument. | ||
onHostSizeChanged | function / null | Gets fired after the host size or host padding has changed. It takes one argument. | ||
onUpdated | function / null | Gets fired after the host size has changed. It takes one argument. | ||
} |
API
There are some methods of the plugin you may want to call.
setAnimationSpeed(speed)
Changes programmatic scroll animation speed to the passed – an integer indicating how many milliseconds the animation should last.
It’s also possible to set the animation speed upon plugin initialization. By default it equals .
Note that you may use this method if want to have some scrolls animated and some without animation – to get rid of the animation just call it with .
scrollTo(element)
Scrolls viewport to a given element inside scrolled content. An element might be jQuery object or a selector string. To control animation speed use initialization option. Example usage:
scrollToX(x)
Sets horizontal scrollbar position to pixels. should be in range from 0 to scrolled content width. If it’s outside that range, content will be scrolled to the start or to the end. To control animation speed use initialization option.
scrollToY(y)
Sets vertical scrollbar position to pixels. should be in range from 0 to scrolled content height. If it’s outside that range, content will be scrolled to the start or to the end. To control animation speed use initialization option.
resize(keepPosition)
Recalculates and sets sizes of all scrollbar components. Call this whenever your scrolled block changes its size and scrollbar becomes invalid. After you call it scrollbar is adjusted to new sizes of your block.
Use parameter to decide if the scrollbar should stay in the same position () or change position () so that the thumb position change is proportional to the size change. The first case is useful if your container changes size and you want to show exactly the same content that was visible before size change. The second case is useful when you’re listening to window resize.
Options
There are some options you can pass when initializing scrollbar:
Option | Type | Default value | Description |
---|---|---|---|
Speed of the animation of programmatic scrolling. It’s possible to edit it with method. Animation speed equal to means no animation. | |||
By default thumb height (in case of vertical scrollbar) is calculated automatically depending on viewport and overview height but you can fix thumb height to your chosen pixel value by setting this option. Make sure to not set in css if you set because has priority. | |||
Option analogical to but applied to thumbs of horizontal scrollbars. | |||
Indicates whether or not, horizontal scrollbar should be shown when it’s necessary. | |||
When the scrolling event occurs (e.g. down arrow key, mouse wheel) and it doesn’t cause the scrollbar to move (e.g. because the scrollbar is in extreme position), the event is propagated further which will cause the parent container to scroll. If it does cause the scrollbar movement then such event is stopped from propagating further and the parent container won’t scroll. This default behaviour can be changed by setting . It will cause the custom scrollbar to always stop scrolling event propagation no matter if the scrollbar changed or didn’t change its position. | |||
A css skin class that will be added to the scrolled container. You can define it in html as well as here in options. Note that skin has to be defined in one of those ways. | |||
Indicates how fast touch scroll should be. When you swipe your finger by pixels the content will be scrolled by pixels. | |||
Indicates whether scrollbar should recalculate thumb size when window is resized. See for an example. | |||
Same as above but applies to vertical scrollbar. | |||
Indicates how fast mouse wheel scroll should be. When you make the smallest possible mouse wheel move, the content will be scrolled by pixels. |
For example:
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderFavicon