Как сделать скролл меньше

Обновлено: 03.07.2024

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

Простой пример

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

У элемента есть рамка (border), внутренний отступ (padding) и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов (margin), потому что они не являются частью элемента, для них нет особых JavaScript-свойств.

Результат выглядит так:

Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет 300px , но если предположить, что ширина полосы прокрутки равна 16px (её точное значение зависит от устройства и браузера), тогда остаётся только 300 - 16 = 284px , и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще.

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

Метрики

Вот общая картина с геометрическими свойствами:

Значениями свойств являются числа, подразумевается, что они в пикселях.

Давайте начнём исследовать, начиная снаружи элемента.

offsetParent, offsetLeft/Top

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

То есть, ближайший предок, который удовлетворяет следующим условиям:

Свойства offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent .

В примере ниже внутренний

имеет элемент в качестве offsetParent , а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла ( 180 ):

Существует несколько ситуаций, когда offsetParent равно null :

Для скрытых элементов (с CSS-свойством display:none или когда его нет в документе).
Для элементов и .
Для элементов с position:fixed .

offsetWidth/Height

Теперь переходим к самому элементу.

Для нашего элемента:

offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины ( 300px ), внутренних отступов ( 2 * 20px ) и рамок ( 2 * 25px ).
offsetHeight = 290 – внешняя высота блока.

Координаты и размеры в JavaScript устанавливаются только для видимых элементов.

Если элемент (или любой его родитель) имеет display:none или отсутствует в документе, то все его метрики равны нулю (или null , если это offsetParent ).

Например, свойство offsetParent равно null , а offsetWidth и offsetHeight равны 0 , когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none .

Мы можем использовать это, чтобы делать проверку на видимость:

Заметим, что функция isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые

clientTop/Left

Пойдём дальше. Внутри элемента у нас рамки (border).

Для них есть свойства-метрики clientTop и clientLeft .

В нашем примере:

clientLeft = 25 – ширина левой рамки
clientTop = 25 – ширина верхней рамки

…Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.

В чём же разница?

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

В этом случае clientLeft будет равно 25 , но с прокруткой – 25 + 16 = 41 .

Вот соответствующий пример на иврите:

clientWidth/Height

Эти свойства – размер области внутри рамок элемента.

Они включают в себя ширину области содержимого вместе с внутренними отступами padding , но без прокрутки:

На рисунке выше посмотрим вначале на высоту clientHeight .

Горизонтальной прокрутки нет, так что это в точности то, что внутри рамок: CSS-высота 200px плюс верхние и нижние внутренние отступы ( 2 * 20px ), итого 240px .

Теперь clientWidth – ширина содержимого здесь равна не 300px , а 284px , т.к. 16px отведено для полосы прокрутки. Таким образом: 284px плюс левый и правый отступы – всего 324px .

Если нет внутренних отступов padding , то clientWidth/Height в точности равны размеру области содержимого внутри рамок за вычетом полосы прокрутки (если она есть).

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

scrollWidth/Height

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

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

scrollHeight = 723 – полная внутренняя высота, включая прокрученную область.
scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth .

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

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

scrollLeft/scrollTop

Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.

Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.

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

При клике на следующий элемент будет выполняться код elem.scrollTop += 10 . Поэтому он будет прокручиваться на 10px вниз.

Установка значения scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.

Не стоит брать width/height из CSS

Мы рассмотрели метрики, которые есть у DOM-элементов, и которые можно использовать для получения различных высот, ширин и прочих расстояний.

Но как мы знаем из главы Стили и классы, CSS-высоту и ширину можно извлечь, используя getComputedStyle .

Так почему бы не получать, к примеру, ширину элемента при помощи getComputedStyle , вот так?

Почему мы должны использовать свойства-метрики вместо этого? На то есть две причины:

Во-вторых, CSS свойства width/height могут быть равны auto , например, для инлайнового элемента:

Конечно, с точки зрения CSS width:auto – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в px , который мы могли бы использовать для вычислений. Получается, что в данном случае ширина из CSS вообще бесполезна.

…Но с getComputedStyle(elem).width ситуация иная. Некоторые браузеры (например, Chrome) возвращают реальную внутреннюю ширину с вычетом ширины полосы прокрутки, а некоторые (например, Firefox) – именно CSS-свойство (игнорируя полосу прокрутки). Эти кроссбраузерные отличия – ещё один повод не использовать getComputedStyle , а использовать свойства-метрики.

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

У элемента с текстом в стилях указано CSS-свойство width:300px .

Обратите внимание: описанные различия касаются только чтения свойства getComputedStyle(. ).width из JavaScript, визуальное отображение корректно в обоих случаях.

Итого

У элементов есть следующие геометрические свойства (метрики):

Все свойства доступны только для чтения, кроме scrollLeft/scrollTop , изменение которых заставляет браузер прокручивать элемент.

Задачи

Найти размер прокрутки снизу

Свойство elem.scrollTop содержит размер прокрученной области при отсчёте сверху. А как подсчитать размер прокрутки снизу (назовём его scrollBottom )?

Напишите соответствующее выражение для произвольного элемента elem .

P.S. Проверьте: если прокрутки нет вообще или элемент полностью прокручен – оно должно давать 0 .

Другими словами: (вся высота) минус (часть, прокрученная сверху) минус (видимая часть) – результат в точности соответствует размеру прокрутки снизу.

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

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

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

::-webkit-scrollbar — это фон самого скроллбара.
::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

3 CSS стили

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

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

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

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

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

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

Сначала, нажмите меню Пуск, нажав кнопку Пуск в левом нижнем углу экрана.

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

Выберите Мышь и сенсорная панель панели в меню слева , чтобы открыть окно настройки мыши.

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

По умолчанию, значение ползунка уже установлен на "3". При необходимости вы можете настроить его , чтобы ответить на любой чувствительности от 1 - 100. Если вы хотите , чтобы ввести значение вашего выбора чувствительности колесика колеса открыть ссылку в нижней части страницы , которая гласит : "Дополнительные опции мыши"

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

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

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

На сегодняшний день, можно очень простым способом изменить внешний вид всем надоевшей серой полосы прокрутки. И для этого не нужно подключать сторонние библиотеки или писать JavaScript код, а достаточно запомнить несколько CSS свойств. Правда, такой способ имеет поддержку, только у популярных -webkit браузеров - Chrome, Safari, Opera.

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

Свойство -webkit-scrollbar

Свойство -webkit-scrollbar служит контейнером для всех элементов полосы прокрутки: ползунка и дорожки. Его стандартная ширина равна 17 пикселям, но мы можем задавать любую ширину.

::-webkit-scrollbar width: 25px; /* ширина нового скроллбара */
>

Свойство -webkit-scrollbar-track

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

Мы видим, что дорожка покрасилась в светло-розовый цвет.

Свойство -webkit-scrollbar-thumb

Свойство -webkit-scrollbar-thumb кастомизирует ползунок, который бегает по дорожке. Теперь покрасим наш ползунок в темно-розовый цвет, скруглим у него углы и зададим рамку.

В качестве дополнения на ползунок можно повесить картинку.

Очень круто будет смотреться линейный градиент.

Свойство -webkit-scrollbar-button

Свойство -webkit-scrollbar-button отвечает за навигационные стрелочки, которые были сверху и снизу у стандартной полосы прокрутки.

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Читайте также: