Заходят как-то два браузера в скроллбар…

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 Slider

Дополнительные функции


полоса прокрутки с пометками о найденных фрагментах текста

В некоторых системах, например в OS X начиная с версии 10.7, полосы прокрутки скрываются, появляясь только при попытке обращения к ним.

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

Устройство

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

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

Свойства элемента 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.

Conclusion

A recap of what we discussed:

  • Customized scrollbars aren’t uncommon anymore. You will find them in major websites and blogs, especially personal portfolio websites.
  • There are tons of jQuery plugins that can help with customizing scrollbar.
  • Custom scrollbars are exposed behind the vendor prefix.
  • Basic structure of a scrollbar.
  • Terminologies associated with scrollbars.

The CSS way of customizing scrollbars is simple, but looks a bit rough. However, operating systems like Windows, OS X and Linux have their own style for the scrollbar. This in return could lead to undesirable results and inconsistencies for your design. Remember, you should keep it simple, stupid (KISS), not too fancy.

I have created more scrollbars using the above procedure. I made use of codePen for the demo, and you can find the full code for this tutorial on CodePen.

That’s all. I hope you like it!

Make sure to leave any thoughts, questions or concerns in the comments below. I would love to see them.

Setup

First, create index.html and style.css files, and open the current directory with Sublime Text (or Atom, VIM, WebStorm).

Note: If you’re on Windows, read Open Sublime Text From Command Line to run the commands below.

Create HTML Document (index.html)

You’ll need to include the style.css file in the HTML file. You can type out the above HTML code or just copy and paste into your HTML file. 🙂

Upgrade Your JS Go from vanilla JavaScript React

Watch for FREE

CSS Stylesheet (style.css)

Firstly, we set the (class) , then set to get the vertical scrollbar. We set to the div so that the scrollbar appears (because we used the property to scroll in class).

Now, we use the scrollbar pseudo-element for creating our custom scrollbar. It will replace its default width with a new width of and then add .

Since we know that scrollbar contains , and , we are now going to give a stylish look to thumb. We use pseudo-element (i.e. ::-webkit-scrollbar-thumb) with webkit prefix and set scrollbar-thumb .

After that, the scrollbar looks like this:

We use on to make it stylish and add contrast between the scrollbar and scrollbar-track.

How To Create Custom Scrollbars

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard pseudo element, which allows us to modify the look of the browser’s scrollbar.

The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:

Example


/* width */::-webkit-scrollbar {  width: 10px;}/* Track */ ::-webkit-scrollbar-track {  background: #f1f1f1; }/* Handle */ ::-webkit-scrollbar-thumb {  background: #888; }/* Handle on hover */::-webkit-scrollbar-thumb:hover {  background: #555; }

This example creates a scrollbar with box shadow:

Example

/* width */::-webkit-scrollbar {  width: 20px;}/* Track */ ::-webkit-scrollbar-track {  box-shadow: inset 0 0 5px grey;   border-radius: 10px;}/* Handle */::-webkit-scrollbar-thumb {   background: red;   border-radius: 10px;}

Создание пользовательских полос прокрутки

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

В следующем примере создается тонкая полоса прокрутки (10px Wide), которая имеет серый цвет дорожки/полосы и темно-серый (#888) дескриптор:

Пример

/* width */::-webkit-scrollbar {    width: 10px;}/* Track */ ::-webkit-scrollbar-track {    background: #f1f1f1; }/* Handle */ ::-webkit-scrollbar-thumb {    background: #888; }/* Handle on hover */::-webkit-scrollbar-thumb:hover {    background: #555; }

В этом примере создается полоса прокрутки с тенью поля:

Пример

/* width */::-webkit-scrollbar {    width: 20px;}/* Track */ ::-webkit-scrollbar-track {    box-shadow: inset 0 0 5px grey;     border-radius: 10px;}/* Handle */::-webkit-scrollbar-thumb {    background: red;     border-radius: 10px;}

Запретить прокрутку

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

Чтобы запретить прокрутку страницы, достаточно установить .

Попробуйте сами:

Первая кнопка останавливает прокрутку, вторая возобновляет её.

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

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

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

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

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

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

#

scrollIntoView

Для полноты картины давайте рассмотрим ещё один метод: elem.scrollIntoView(top).

Вызов прокручивает страницу, чтобы оказался вверху. У него есть один аргумент:

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

Кнопка ниже прокрутит страницу так, что она сама окажется вверху:

this.scrollIntoView()


А следующая кнопка прокрутит страницу так, что она сама окажется внизу

this.scrollIntoView(false)

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

Internet Explorer 5.5+

*These properties were never part of the CSS specification, nor were they ever approved or vendor prefixed, but they work in Internet Explorer and Konqueror. These can also be set locally in the user style sheet for each application. In Internet Explorer you find it under the «Accessibility» tab, in Konqueror under the «Stylesheets» tab.

As of Internet Explorer 8 these properties were vendor prefixed by Microsoft, but they were still never approved by W3C.

Further details about Internet Explorer

Internet Explorer makes available which sets whether or not to disable or enable scroll bars; it can also be used to get the value of the position of the scroll bars.

With Microsoft Internet Explorer 6 and later, when you use the declaration to specify standards-compliant mode, this attribute applies to the HTML element. When standards-compliant mode is not specified, as with earlier versions of Internet Explorer, this attribute applies to the element, NOT the element.

It’s also worth noting that when working with .NET the ScrollBar class in in the Presentation framework is responsible for rendering the scrollbars.

  • MSDN. Basic UI properties
  • W3C. About non-standard scrollbar properties
  • MSDN. .NET ScrollBar Class

scrollWidth/Height

Эти свойства – как , но также включают в себя прокрученную (которую не видно) часть элемента.

На рисунке выше:

  • – полная внутренняя высота, включая прокрученную область.
  • – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна .

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.

Таким кодом:

Нажмите на кнопку, чтобы распахнуть элемент:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

element.style.height =

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

Пример 1

Условие примера 1

  1. На пользовательской форме VBA Excel расположены элементы управления ScrollBar1 и Label1.
  2. Необходимо задать для полосы прокрутки ScrollBar1 интервал значений от -100 до 100 единиц с шагом 5 и отображением текущего значения на элементе Label1.
  3. При открытии формы полоса прокрутки должна быть установлена на значении 0.

Решение примера 1

Первоначальные настройки при открытии пользовательской формы:

1 2 3 4 5 6 7 8 9 10

PrivateSubUserForm_Initialize()

Me.Caption=»Пример 1″

WithScrollBar1

.Min=-100

.Max=100

.SmallChange=5

.Value=

EndWith

Label1.Caption=»0″

EndSub

Обработка события Change объекта ScrollBar1:

1 2 3

PrivateSubScrollBar1_Change()

Label1.Caption=ScrollBar1.Value

EndSub

Обе процедуры размещаются в модуле пользовательской формы VBA Excel.

Пример 2

Условие примера 2

  1. На пользовательской форме расположены элементы управления ScrollBar1 и TextBox1.
  2. Интервал значений для полосы прокрутки ScrollBar1 от 0 до 1000 единиц с шагом 10 и отображение текущего значения в поле элемента TextBox1.
  3. При открытии формы полоса прокрутки должна быть установлена в значение 0.
  4. Установка соответствующего значения полосы прокрутки при ручном изменении содержимого текстового поля.
  5. Предусмотреть сообщение о значении TextBox1, не входящем в интервал значений элемента управления ScrollBar1.

Решение примера 2

Первоначальные настройки при открытии пользовательской формы:

1 2 3 4 5 6 7 8 9 10


PrivateSubUserForm_Initialize()

Me.Caption=»Пример 2″

WithScrollBar1

.Min=

.Max=1000

.SmallChange=10

.Value=

EndWith

TextBox1.Text=»0″

EndSub

Обработка события Change объекта ScrollBar1:

1 2 3

PrivateSubScrollBar1_Change()

TextBox1.Text=ScrollBar1.Value

EndSub

Обработка события Change объекта TextBox1:

1 2 3 4 5 6 7

PrivateSubTextBox1_Change()

On ErrorGoToInstr

ScrollBar1.Value=TextBox1.Text

ExitSub

Instr

TextBox1.Text=»Недопустимое значение»

EndSub

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

Все три процедуры размещаются в модуле пользовательской формы.

Содержание рубрики VBA Excel по тематическим разделам со ссылками на все статьи.

offsetParent, offsetLeft/Top

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

Несмотря на то, что эти свойства нужны реже всего, они – самые «внешние», поэтому начнём с них.

В находится ссылка на родительский элемент в смысле отображения на странице.

Уточним, что имеется в виду.

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

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

Получается, что элемент имеет в дополнение к обычному родителю в DOM – ещё одного «родителя по позиционированию», то есть относительно которого он рисуется. Этот элемент и будет в свойстве .

Свойства задают смещение относительно .

В примере ниже внутренний имеет DOM-родителя , но у него , и сдвиги относительно его верхнего-левого угла будут в :

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 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 AnimationsGet Iframe Elements


С этим читают