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

Всем привет, я Чжан Сансуй🤣, фронтенд правовой системы⚖️. Люблю делиться🖋️, люблю Bingbing🧊🧊.
Добро пожаловать, друзья, чтобы добавить меня в WeChat: maomaoibingbing, пригласите вас в группу, обсудите вместе и с нетерпением жду возможности расти вместе со всеми🥂.

предисловие

Стиль полосы прокрутки в браузере должен быть всем знаком, и его стиль не годится. Может быть, многие друзья еще не знают, стиль этого материала также можно изменить (поддерживаются только некоторые современные браузеры), на этот раз я покажу вам, как его использовать.CSSИзмените его стиль.

Сначала распознайте полосу прокрутки

Прежде всего, давайте кратко рассмотрим, из каких частей состоит полоса прокрутки:

滚动条的组成.png

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

当同时有垂直滚动条和水平滚动条时交汇的部分.png

2. Решения

1. Псевдоклассы CSS

В настоящее время мы можем пройтиCSS伪类Для реализации изменения стиля полосы прокрутки используются следующие псевдоклассы CSS для изменения стиля полосы прокрутки:

::-webkit-scrollbar — вся полоса прокрутки
::-webkit-scrollbar-button — кнопка на полосе прокрутки (стрелки вверх и вниз)
::-webkit-scrollbar-thumb — Полоса прокрутки на полосе прокрутки
::-webkit-scrollbar-track — Отслеживание полосы прокрутки
::-webkit-scrollbar-track-piece — Отслеживание части полосы прокрутки без ползунка
::-webkit-scrollbar-corner — Угол, который пересекается, когда есть как вертикальная полоса прокрутки, так и горизонтальная полоса прокрутки
::-webkit-resizer — частичные стили для углов определенных элементов (например, перетаскиваемые кнопки для текстового поля)

прикреплен здесьMDNПортал документов:developer.Mozilla.org/this-cn/docs/…

2. Проблемы совместимости

Конечно, у этого решения все еще есть определенные проблемы с совместимостью, и оно поддерживает толькоWebKitбраузеры (например, Google Chrome, Apple Safari). На самом деле, когда вы видите-webkit-префикс, чтобы понять, что этоCSS3середина私有属性前缀, конкретный префикс предназначен для адаптации к конкретному ядру браузера. мы идемCan I useПроверьте его совместимость:

“::-webkit-scrollbar”属性兼容性.png

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

3. Тест

1. Вся полоса прокрутки

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

/* 整个滚动条 */
/* 宽高分别对应纵向滚动条和横向滚动条的宽度 */
::-webkit-scrollbar {
    width: 50px;
}

滚动条样式修改测试-1.gif

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

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 50px;
    background-color: skyblue;
}

滚动条样式修改测试-2.png

После увеличения цвета фона снова "появляется" полоса прокрутки. Комбинируя код только что, мы можем легко увидеть, что: set::-webkit-scrollbarСвойство сделает недействительным стиль полосы прокрутки по умолчанию. В таком случае мы должны использовать его в сочетании с другими свойствами.

2. Кнопки со стрелками на полосе прокрутки

давайте использовать это::-webkit-scrollbar-buttonсвойство, обнаружил, что это свойство не имеет никакого эффекта при использовании отдельно:

/* 滚动条上的箭头按钮 */
::-webkit-scrollbar-button {
    background-color: slateblue;
}

滚动条样式修改测试-3.png

Итак, добавим предыдущий код и попробуем еще раз:

滚动条样式修改测试-4.png

Мы видим, что цвет фона кнопки положения двух стрелок изменился. Кажется, что другие свойства псевдокласса полосы прокрутки должны соответствовать::-webkit-scrollbarвступить в силу.

3. Ползунок прокрутки на полосе прокрутки

мы используем::-webkit-scrollbar-thumbчтобы изменить стиль ползунка в полосе прокрутки:

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 50px;
    background-color: skyblue;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: orange;
}

滚动条样式修改测试-5.gif

4. Полоса прокрутки

использовать::-webkit-scrollbar-trackСвойство изменяет стиль дорожки полосы прокрутки:

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 50px;
    background-color: skyblue;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: orange;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: hotpink;
}

滚动条样式修改测试-6.png

Благодаря визуализации мы можем обнаружить, что установленный цвет фона полосы прокрутки перекрывает установленный цвет фона (небесно-голубой) всей полосы прокрутки. Можно ли добиться эффекта вложения двух цветов фона внутри и снаружи? В настоящее время было предпринято несколько безрезультатных попыток, и мы можем только временно отказаться. Ниже приведен код для эффекта вложенного цвета фона, который имеет не было реализовано после тестирования:

/* 未实现背景色嵌套效果代码 */
::-webkit-scrollbar {
    /* 无法通过 padding 实现 */
    padding: 4px;
    width: 50px;
    background-color: skyblue;
    box-sizing: border-box;
}

::-webkit-scrollbar-track {
    /* 无法通过调整宽度实现 */
    width: 80%;
    background-color: hotpink;
}

В этом случае, если нам нужно настроить цвет фона полосы прокрутки, нам нужно только::-webkit-scrollbarи::-webkit-scrollbar-trackВы можете выбрать один из них.

5. Трековая часть полосы прокрутки без ползунка

На этот раз мы установили оба::-webkit-scrollbar-trackи::-webkit-scrollbar-track-pieceЧтобы увидеть эффект:

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 50px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: orange;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: hotpink;
}

/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background-color: purple;
}

滚动条样式修改测试-7.png

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

6. Резюме теста

настраивать::-webkit-scrollbarСвойство сделает недействительным стиль полосы прокрутки по умолчанию.
Другие частные свойства, которые изменяют стиль полосы прокрутки, должны быть согласованы::-webkit-scrollbarиспользование собственности
Если вы хотите установить цвет фона полосы прокрутки,::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-track-pieceВы можете установить одно из трех свойств.

В-четвертых, начните меняться

1. Полоса прокрутки сплошного цвета

После изучения модификации полосы прокруткиCSSПосле свойств можно наконец приступить к строительству, давайте сначала сымитируемElementСтиль полосы прокрутки в , измените полосу прокрутки сплошного цвета:

/* 整个滚动条 */
::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 10px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}

滚动条样式修改测试-8.gif

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

2. Полоса прокрутки шаблона

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

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    /* 关键代码 */
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}

滚动条样式修改测试-9.gif

Я чувствую, эффект отличный (при условии, что люди, которые любят навороты), сердцебиение не так хорошо, как действие, поторопитесьCopyСойди и пощади!

использованная литература

developer.Mozilla.org/this-cn/docs/…