Вы хотите добавить пользовательскую полосу прокрутки в WordPress? Изменение внешнего вида полосы прокрутки может помочь вам выделиться, особенно при создании пользовательской темы для вашего сайта.
В этой статье мы покажем вам, как легко добавить пользовательскую полосу прокрутки в WordPress. Мы покажем вам два решения, и вы сможете выбрать то, которое подходит именно вам.
Проблемы с цветами пользовательской полосы прокрутки
По умолчанию CSS не содержит набора правил, позволяющих изменять свойства полосы прокрутки. Есть несколько предложений по добавлению этой функции, но на данный момент они не поддерживаются большинством браузеров.
Чтобы преодолеть эту проблему, дизайнеры и разработчики используют специфические для браузера элементы pseduo или JavaScript для переопределения стандартного вида полосы прокрутки.
Мы покажем вам обе техники. Однако помните, что вы должны протестировать свой сайт с помощью различных браузеров и устройств, чтобы убедиться, что он работает правильно на всех браузерах.
Учитывая это, давайте рассмотрим, как добавить пользовательские цвета полосы прокрутки в WordPress.
Способ 1. Добавление пользовательской полосы прокрутки в WordPress с помощью плагина
Этот способ проще и рекомендуется для большинства пользователей. Однако он не поддерживает мобильные браузеры.
Прежде всего, вам нужно установить и активировать плагин Advanced Scrollbar. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вам необходимо перейти по адресу Настройки » Настройки пользовательских цветов полосы прокрутки страница для настройки плагина.
Отсюда вы можете изменить цвет полосы прокрутки и цвета фона полосы прокрутки. Затем вы можете выбрать шаг прокрутки мыши — скорость прокрутки колесика мыши.
Вы также можете выбрать, хотите ли вы автоматически скрывать полосу прокрутки или отображать ее всегда.
У вас есть возможность выбрать опцию ‘Cursor only’, которая будет отображать полосу прокрутки, но не кнопку.
Ниже вы найдете опции для установки скорости прокрутки, изменения выравнивания полосы (влево или вправо) и включения сенсорного поведения.
Не забудьте нажать на кнопку сохранения изменений, чтобы сохранить настройки.
Теперь вы можете зайти на свой сайт, чтобы увидеть пользовательские цвета полосы прокрутки в действии.
Способ 2. Добавление пользовательских цветов полосы прокрутки в WordPress с помощью CSS
Этот метод использует CSS для стилизации полосы прокрутки, что быстрее, чем использование jQuery.
Однако это работает только в настольных браузерах, использующих движок рендеринга WebKit, таких как Google Chrome, Safari, Opera и др.
Это не будет иметь никакого эффекта в мобильных браузерах или Firefox и Edge на настольных компьютерах.
Вам нужно будет добавить следующий пользовательский CSS в вашу тему WordPress.
::-webkit-scrollbar < -webkit-appearance: none; >::-webkit-scrollbar < width: 10px; >::-webkit-scrollbar-track < background: #ffb400; border:1px solid #ccc; >::-webkit-scrollbar-thumb < background: #cc00ff; border:1px solid #eee; height:100px; border-radius:5px; >::-webkit-scrollbar-thumb:hover
Не стесняйтесь изменять цвета и другие свойства CSS.
Когда вы будете удовлетворены, не забудьте сохранить изменения. После этого вы можете предварительно просмотреть его в поддерживаемом браузере.
Вот как это выглядело на нашем демонстрационном сайте при просмотре в Google Chrome на компьютере Mac.
Мы надеемся, что эта статья помогла вам узнать, как добавить пользовательскую полосу прокрутки в WordPress. Вы также можете ознакомиться с нашим руководством о том, как легко создать индивидуальную тему WordPress без написания кода.
Источник: www.wpbeginner.com