Улучшенная реализация технологии индикатора прокрутки на чистом CSS

by zhangxinxu from Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу
В этой статье приветствуется обмен и агрегация.Не обязательно перепечатывать полный текст.Авторские права соблюдаются.Круг такой большой.Если нужно срочно,можно обращаться за авторизацией.

滚动指示器封面图

1. Индикатор прокрутки CSS

Индикатор прокрутки означает, что в верхней части страницы будет индикатор выполнения, показывающий ход прокрутки. Эффект показан на следующем GIF-файле (нажмите, чтобы воспроизвести):

滚动计数器示意效果

Индикатор прокрутки CSS относится к эффекту прогресса прокрутки, достигаемому чистым CSS без помощи JavaScript.

Во-вторых, традиционный метод реализации

Традиционный метод реализации CSS был впервые предложен человеком по имени Майк, времени должно быть 16 лет, этот CodePen имеет более 100 000 посещений:CSS only scroll indicator

Традиционная реализация CSS очень креативна, и конкретный принцип заключается в следующем.

Напишите диагональный линейный градиент на теге body, а затем покройте его белым плавающим слоем с фиксированным положением. Код CSS выглядит следующим образом:

body{    
    background: linear-gradient(to right top, teal 50%, white 50%);
    background-size: 100% calc(100% - 100vh);
    background-repeat: no-repeat;
}

body::before{
    content:'';
    position: fixed;
    top: 5px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: white;
}

::beforeПсевдоэлемент имитирует белое наложение, но это наложение не полностью покрыто. Небольшое расстояние видно по верхнему краю. Это расстояние может показать градиентный фон тела. По мере прокрутки появляется эффект, похожий на индикатор выполнения появится. . Если мы уменьшим прозрачность белого наложения, каждый сможет понять принцип реализации, как показано на следующем эффекте записи экрана GIF (нажмите, чтобы воспроизвести, размер 1M):

传统指示器原理示意图

В-третьих, фатальный недостаток традиционных методов реализации.

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

Фатальный недостаток:

Содержимое страницы не может иметь фоновый цвет или фоновое изображение!
У самого тела не может быть фонового изображения!

Из-за двух вышеупомянутых свойств фактическая сцена разработки непредсказуема.Содержимое страницы может иметь фоновое изображение или что-то в этом роде, что на самом деле влияет на эффект индикатора прокрутки CSS.Очевидно, что эта технология непрактична. , это с открытым исходным кодом Просто игрушка для глаз.

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

В-четвертых, я думаю о лучшей реализации

Разница, о которой я думаю в этой технической реализации, заключается в том, что диагональный линейный градиент записывается не в теге body, а в обычном элементе div.

Конкретные операции заключаются в следующем:

Вставьте элемент индикатора внутрь тега :
```
<div class="indicator"></div>
```

Вставьте код CSS, показанный ниже:

body {
    position: relative;
}
.indicator {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
    background-size: 100% calc(100% - 100vh);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: darken;
}
.indicator::after {
    content: '';
    position: fixed;
    top: 5px; bottom: 0; right: 0; left: 0;
    background: #fff;
    z-index: 1;
}

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

Эффект записи экрана в формате GIF выглядит следующим образом (обратите внимание на верхний край):

我的更好的CSS滚动指示器

Описание принципа

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

Мой метод оптимизации состоит в том, чтобы написать диагональный градиент (то есть полосу прокрутки) поверх нормального элемента с белым наложением внутри, чтобы избежать фатальной ошибки перезаписи. Но эта реализация приносит другую проблему.Содержимое страницы закрыто белым слоем.Разве содержимое страницы не невидимо? Не волнуйтесь, есть объявление CSS, чтобы сделать белый слой прозрачным, то естьmix-blend-mode:darken, который затемняет режим наложения. Метод смешивания режима затемнения хорошо понятен.Когда смешиваются два цвета, какой цвет темнее и какой цвет используется?

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

原理示意图

5. Другие объяснения и выводы

Чтобы индикаторы прокрутки CSS работали хорошо, нужно помнить о двух вещах:

Цвет индикатора выполнения должен быть как можно более темным, потому что он содержит режим наложения затемнения.Если цвет слишком светлый, его легко смешать с цветом содержимого внизу.
Индикатор прокрутки CSS должен появляться, когда высота прокрутки страницы превышает один экран. Причин две: во-первых, если высота прокрутки слишком мала, нет необходимости использовать индикатор прокрутки; во-вторых, индикатор прокрутки по сути является градиентом, если высота прокрутки недостаточна, край индикатора выполнения будет слишком наклонен, и эффект отображения не будет идеальным.

На самом деле, содержание этой статьи должно было быть запланировано 2 месяца назад (содержание, опубликованное на 5-й конференции CSS), и оно не обновлялось до сегодняшнего дня.Слишком много дел, и я хочу сделать Накопилось. Роман Чжоу Гэна уже опубликован. Я не писал его уже месяц, а на официальном счету есть несколько статей, которые нужно написать. Я не знаю, когда он будет запланирован. Сегодня еще две, есть еще 5 статей для завершения Праздника лодок-драконов, но считается, что хорошо закончить 3 статьи, потому что Фестиваль лодок-драконов также устроил мне требование развития оплаты, и есть еще 2 статьи, которые можно будет закончить только на следующей неделе, а романы? А статья о публичном номере? МОЙ БОГ! Я поеду в Пекин, чтобы поделиться на следующей неделе, к счастью, если вы уступите, вы все равно получите половину.

давай давай!

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

(Конец статьи) // Статья хорошая, хочуПоделиться в WeChat! Есть что сказать? нажмитездесь.