Как добавить пользовательскую полосу прокрутки в WordPress

1 min


Хотите добавить пользовательскую полосу прокрутки в WordPress? Изменение внешнего вида полосы прокрутки может помочь вам особенно выделиться при создании пользовательской темы для вашего сайта.

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

Добавление пользовательской полосы прокрутки в WordPress

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

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

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

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

При этом давайте посмотрим, как добавить пользовательские цвета полосы прокрутки в WordPress.

Способ 1. Добавьте пользовательскую полосу прокрутки в WordPress с плагином

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

Во-первых, вам нужно установить и активировать плагин Advanced Scrollbar. Для более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

После активации вам нужно Настройки »Пользовательские настройки полосы прокрутки цвета страница для настройки плагина.

Настройки полосы и цвета полосы прокрутки

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

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

У вас есть возможность выбрать опцию «Только курсор», которая будет отображать полосу прокрутки, но не кнопку.

Варианты прокрутки

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

Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки.

Теперь вы можете посетить свой веб-сайт, чтобы увидеть ваши собственные цвета полосы прокрутки в действии.

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

Способ 2. Добавление пользовательских цветов полосы прокрутки в WordPress с использованием CSS

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

Однако он работает только в настольных браузерах, использующих движок рендеринга WebKit, например, Google Chrome, Safari, Opera и другие.

Это не повлияет на мобильные браузеры, Firefox и Edge на настольные компьютеры.

Вам нужно будет добавить следующий пользовательский CSS в вашу тему WordPress.


:: - webkit-scrollbar {
    внешний вид: нет;
}
:: - webkit-scrollbar {
  ширина: 10 пикселей;
}

:: - webkit-scrollbar-track {
  фон: # ffb400;
граница: 1px solid #ccc;
}

:: - webkit-scrollbar-thumb {
  фон: # cc00ff;
граница: 1px solid #eee;
высота: 100px;
пограничный радиус: 5px;
}

:: - webkit-scrollbar-thumb: hover {
  фон: синий;
}

Не стесняйтесь менять цвета и другие свойства CSS.

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

Вот как это выглядело на нашем демонстрационном веб-сайте при просмотре в Google Chrome на компьютере Mac.

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

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

Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас на щебет и фейсбук.


0 Comments

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