Css свойство scrollbar

Goals & Features

• A simple, powerful and good documented API.
• High browser compatibility (IE8+, Safari6+, Firefox, Opera, Chrome and Edge).
• Usage of the most recent technologies to ensure maximum efficiency and performance on newer browsers.
• Can be used without any dependencies or with jQuery.
• Automatic update detection — after the initialization you don’t have to worry about updating.
• Extremely powerful scroll method with features like animations, relative coordinates, scrollIntoView and more.
• Mouse and touch support.
• Textarea and Body support.
• RTL Direction support. (with normalization)
• Simple and effective scrollbar-styling.
• Rich extension system.
• TypeScript support.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Scroll Box Position and Scrolling Range

The position of the scroll box is represented as an integer; it is relative to the left or upper end of the scroll bar, depending on whether the scroll bar is horizontal or vertical. The position must be within the minimum and maximum values of the scrolling range. For example, in a scroll bar with a range of 0 through 100, position 50 is in the middle, with the remaining positions distributed equally along the scroll bar. The initial range depends on the scroll bar. Standard scroll bars have an initial range of 0 through 100; scroll bar controls have an empty range (both minimum and maximum values are zero), unless you supply an explicit range when the control is created. You can change the range at any time. You can use the SetScrollInfo function to set the range values, and the GetScrollInfo function to retrieve the current range values.

An application typically adjusts the scroll range to convenient integers, making it easy to translate the scroll box position into a value corresponding to the data object to be scrolled. For example, if an application must display 260 lines of a text file in a window that can show only 16 lines at a time, the vertical scroll bar range can be set to 1 through 244. If the scroll box is at position 1, the first line will be at the top of the window. If the scroll box is at position 244, the last line (line 260) will be at the bottom of the window. If an application attempts to specify a position value that is less than the minimum or more than the maximum, the minimum or maximum scrolling range value is used instead.

You can set a page size for a scroll bar. The page size represents the number of data units that can fit in the client area of the owner window given its current size. For example, if the client area can hold 16 lines of text, an application would set the page size to 16. The system uses the page size, along with the scrolling range and length of the scroll bar shaft, to set the size of the scroll box. Whenever a window containing a scroll bar is resized, an application should call the SetScrollInfo function to set the page size. An application can retrieve the current page size by calling the sending GetScrollInfo function.

To establish a useful relationship between the scroll bar range and the data object, an application must adjust the range whenever the size of the data object changes.

As the user moves the scroll box in a scroll bar, the scroll bar reports the scroll box position as an integer in the scrolling range. If the position is the minimum value, the scroll box is at the top of a vertical scroll bar or at the left end of a horizontal scroll bar. If the position is the maximum value, the scroll box is at the bottom of a vertical scroll bar or at right end of a horizontal scroll bar.

The maximum value that a scroll bar can report (that is, the maximum scrolling position) depends on the page size. If the scroll bar has a page size greater than one, the maximum scrolling position is less than the maximum range value. You can use the following formula to calculate the maximum scrolling position:

An application must move the scroll box in a scroll bar. Although the user makes a request for scrolling in a scroll bar, the scroll bar does not automatically update the scroll box position. Instead, it passes the request to the parent window, which must scroll the data and update the scroll box position. An application uses the SetScrollInfo function to update the scroll box position; otherwise, it uses the SetScrollPos function. Because it controls the scroll box movement, the application can move the scroll box in increments that work best for the data being scrolled.

Разные состояние скроллбара

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

• horizontal — псевдокласс применяется к любым частям скроллбара, имеющим горизонтальную ориентацию.
• vertical — псевдокласс применяется к любым частям скроллбара, которые имеют вертикальную ориентацию.
• decrement — Псевдокласс декремента применяется к кнопкам и элементами трека скроллбара. Он указывает, будет ли кнопка или элемент трека уменьшать положение вида при использовании (например, вверх по вертикальной полосе прокрутки, влево по горизонтальной полосе прокрутки).
• increment — Псевдокласс инкремента применяется к кнопкам и элементами трека скроллбара. Он указывает, будет ли кнопка или элемент трека увеличивать позицию вида при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
• start — Этот псевдокласс применяется к кнопкам и фрагментам трека. Он сообщает, что объект находится перед ползунком.
• end — Этот псевдокласс применяется к кнопкам и фрагментам трека. Он сообщает, что объект находится после ползунка.
• double-button — Псевдокласс применяется к кнопкам и трекам. Он используется для определения является ли кнопка частью пары кнопок, которые находятся на одном конце скроллбара. Для элементов трека он указывает, примыкает ли элемент трека к паре кнопок.
• single-button — Псевдокласс применяется к кнопкам и элементам трека. Он используется для определения того, находится ли кнопка в конце скроллбара. Для элементов дорожек указывает, примыкает ли элемент трека к одной кнопке.
• no-button — Применяется к элементам трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, кнопки в конце трека нет.
• corner-present — Применяется ко всем элементам скроллбара и указывает на наличие угла полосы прокрутки.
• window-inactive — Применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с . Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

#

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

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

Вот три способа определить, когда элемент находится в видимой области окна:

1. Использовать Intersection Observer API
2. Измерять смещение элемента при скролле страницы
3. Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

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

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

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

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

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

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

Собираем всё вместе

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

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

See this code Use IntersectionObserver API for add class name on x.xhtml.ru.

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

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

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

Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:

See this code Use IntersectionObserver API for add-remove class name on x.xhtml.ru.

Теперь — порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

FAQ

1. Question: I need padding between border/scrollbar and text, but scrollbar does not
   allow it. What should I do?

   Answer: Wrap the inner content in the div with padding

2. Question: I need space between content with scrollbar and the rest of the page.
   What should I do?

   Answer: Wrap the scrollable content into container with padding.

3. Question: If content contains images, content size can be changed after images will
   be loaded. Should I re-initialize scrollbar?

   Answer: No, scrollbar detects content/container size changes automatically and
   recalculates its size or hides/shows scrollbars.

4. Question: How can I scroll content to a custom position?

   Answer: Use standard jQuery scrollTop/scrollLeft functions on the container.
   For example if you have a container with a class «scrollbar-macosx» use the following code to scroll 50px from top:

   jQuery('.scrollbar-macosx').scrollTop(50);

5. Question: I want to know when the content is scrolled. Is there any callback for this?

   Answer: Yes, you can use «onScroll» callback (look at AngularJS example),
   or use the standard «scroll» event on the container. For example you have a container with a class
   «scrollbar-macosx», then use the following code to handle the scroll event:

   jQuery('.scrollbar-macosx').not('.scroll-wrapper').on("scroll", function(){
       console.log('content is scrolling');
   });

6. Question: The scrollbar does not replace the standard scrollbar. What should I do?

   Answer: It’s not a good idea to replace the standard scrollbar for a whole page. But if you
   really need it, wrap all page into container with height/width 100%, overflow: auto and apply
   the scrollbar to this container.

7. Question: I don’t want to see horizontal scrollbar ever. What should I do?

   Answer: Hide it with CSS like this:

   .scroll-element.scroll-x {
       display: none !important;
   }

   But don’t forget that even if the scrollbar is hidden, the content still may be scrollable horizontally.

8. Question: Using jQuery’s .width() or .height() on a container
   will return incorrect values. What is going on?

   Answer: Inner scrollable content uses additional height/width & offset of the scrollbar
   to hide it. To get correct height/width values use the visible container:

   jQuery('.scrollbar-macosx').not('.scroll-content').height();
   jQuery('.scrollbar-macosx').not('.scroll-content').width();

9. Question: How to detect when a DIV is scrolled to the bottom edge?

   Answer: You can make calculations using jQuery’s «scroll» event or you can use
   the «onScroll» callback function that provides information about container’s sizes & offset:

   jQuery('.scrollbar-dynamic').scrollbar({
       "onScroll": function(y, x){
           if(y.scroll == y.maxScroll){
               console.log('Scrolled to bottom');
           }
       }
   });

10. Question: Can I use jQuery Scrollbar to customize textarea scrollbar?

    Answer: Yes, you can. Textarea scrollbars are supported now.
    Look at Basic Scrollbars Demo page.

11. Question: Is it possible to set scrollbars max/min size?

    Answer: Use CSS max-height/min-height (max-width/min-width) to set scrollbar size limits.

12. Question: I have a question / want to report an issue. How can I contact the author?

Настройка 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-анимации можно использовать сокращённое написание свойства , например:

Магия Angular

Бывалый ангулярщик может заметить, что у этого решения крайне низкая производительность. На каждый экземпляр скроллбара мы слушаем все события на документе и каждый раз запускаем проверку изменений. Так дело не пойдет. К счастью, Angular позволяет работать с событиями иначе, о чем я писал ранее. Воспользовавшись библиотекой @tinkoff/ng-event-plugins, мы избавимся от лишних вызовов проверки изменений. Для этого добавим модификатор к подписке и декоратор к обработчику:

Теперь проверка изменений и обработчики событий будут запускаться, только когда мы действительно тянем ползунок. Наш скроллбар готов к использованию. В качестве доработки еще можно следить за изменениями размера самого контейнера, чтобы пересчитать размер ползунков. Для этого отлично подойдет и наша библиотека @ng-web-apis/resize-observer, о которой вы можете почитать тут. Полноценное демо скроллбара доступно на Stackblitz.

Scroll functions

All scroll functions return a cold observable that requires calling , it will emits once scrolling is done and unsubscribe itself, no need to unsubscribe from the function manually.

Scroll to position

scrollRef.scrollTo(options: ScrollToOptions).subscribe()

• Left: x position.
• Top: y position.
• Duration: time to reach position in milliseconds, default null.
• EaseFunc: the easing function for the smooth scroll.

Scroll to element

scrollRef.scrollToElement(selector, offset?, duration?, easeFunc?).subscribe()

• Selector: target element selector.
• Offset: Set scroll offset, default 0.
• Duration: time to reach position in milliseconds, default null.
• EaseFunc: the easing function for the smooth scroll.

Scroll vertically

scrollRef.scrollYTo(position, duration?, easeFunc?).subscribe()

• Position: scrolling position on Y axis in pixels.
• Duration: time to reach position in milliseconds, default null.
• EaseFunc: the easing function for the smooth scroll.

Scroll to right

scrollRef.scrollToRight(duration?, easeFunc?).subscribe()

• Duration: time to reach position in milliseconds, default null.
• EaseFunc: the easing function for the smooth scroll.

Methods

Click on the method name to open a more detailed documentation.

Instance methods:

//get options
var options = instance.options();
//set options
instance.options({ className : null });

//soft update
instance.update();
//hard update
instance.update(true);

//put the instance to sleep
instance.sleep();

//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);

//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);

//get the element to which the plugin was applied
var pluginTarget = instance.getElements().target;

//get the state of the plugin instance
var pluginState = instance.getState();

//destroy the instance
instance.destroy();

//get the instance of the extension "myExtension"
var extensionInstance = instance.ext("myExtension");

//add the registered extension "myExtension" to the plugin instance
var extensionInstance = instance.addExt("myExtension");

//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:

//get the current defaultOptions
var defaultOptions = OverlayScrollbars.defaultOptions();
//set new default options
OverlayScrollbars.defaultOptions({
    className : "my-custom-class",
    resize    : "both"
});

//get the global information
var globals = OverlayScrollbars.globals();

//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();

//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({ });

Attaching ScrollBar to a Flickable

When ScrollBar is attached or to a Flickable, its geometry and the following properties are automatically set and updated as appropriate:

An attached ScrollBar re-parents itself to the target Flickable. A vertically attached ScrollBar resizes itself to the height of the Flickable, and positions itself to either side of it based on the . A horizontally attached ScrollBar resizes itself to the width of the Flickable, and positions itself to the bottom. The automatic geometry management can be disabled by specifying another parent for the attached ScrollBar. This can be useful, for example, if the ScrollBar should be placed outside a clipping Flickable. This is demonstrated by the following example:

Flickable {
    id: flickable
    clip: true
    
    ScrollBar.vertical: ScrollBar {
        parent: flickable.parent
        anchors.top: flickable.top
        anchors.left: flickable.right
        anchors.bottom: flickable.bottom
    }
}

Notice that ScrollBar does not filter key events of the Flickable it is attached to. The following example illustrates how to implement scrolling with up and down keys:

Flickable {
    focus: true

    Keys.onUpPressed: scrollBar.decrease()
    Keys.onDownPressed: scrollBar.increase()

    ScrollBar.vertical: ScrollBar { id: scrollBar }
}

jQuery Scrollbar Options

• autoScrollSize (default: true)
  automatically calculate scrollbar size depending on container/content size
• autoUpdate (default: true)
  automatically update scrollbar if container/content size is changed
• disableBodyScroll (default: false)
  if this option is enabled and the mouse is over the scrollable container, the main page won’t be scrolled
• duration (default: 200)
  scroll speed duration when the mouse is over scrollbar (scroll emulating mode)
• ignoreMobile (default: false)
  do not initialize custom scrollbars on mobile devices
• ignoreOverlay (default: false)
  do not initialize custom scrollbars in browsers when native scrollbars
  overlay content (Mac OS, mobile devices, etc…)
• scrollStep (default: 30)
  scroll step when the mouse is over the scrollbar (scroll emulating mode)
• showArrows (default: false)
  add a class to show scrollbar arrows in the advanced scrollbar
• stepScrolling (default: true)
  emulate step scrolling on mousedown over scrollbar
• scrollx (default: simple)simple, advanced, HTML or jQuery element for horizontal scrollbar
• scrolly (default: simple)simple, advanced, HTML or jQuery element for vertical scrollbar
• onDestroy (default: null)
  callback function when scrollbar is destroyed
• onInit (default: null)
  callback function when scrollbar is initialized at the first time
• onScroll (default: null)
  callback function when container is scrolled
• onUpdate (default: null)
  callback function before scrollbars size is calculated

Элементы скроллбара

Вы можете управлять отдельными элементами для кастомизации скроллбара:

• webkit-scrollbar — Все поле скроллбара.
• webkit-scrollbar-button — Кнопки скрола вверх и вниз (зачастую имеет иконки в виде стрелок).
• webkit-scrollbar-track — Трек поля по которому передвигается ползунок скролла.
• webkit-scrollbar-track-piece — Свободное место на треке (которое не занято ползунком).
• webkit-scrollbar-thumb — Сам ползунок.
• webkit-scrollbar-corner — Угол на скроллбаре, на котором как правило пересекаются вертикальный и горизонтальный скроллбар.
• webkit-resizer — Если ваш скроллбар поддерживает изменение размера поля к которому он прикреплен, можете кастомизировать этот элемент.

#

Scroll Bar Colors and Metrics

The system-defined color value, COLOR_SCROLLBAR, controls the color within a scroll bar shaft. Use the GetSysColor function to determine the color of the scroll bar shaft and the SetSysColors function to set the color of the scroll bar shaft. Note, however, that this change of color affects all scroll bars in the system.

You can get the dimensions of the bitmaps that the system uses in standard scroll bars by calling the GetSystemMetrics function. Following are the system metric values associated with scroll bars.