Интересный вопрос — как реализовать следующий эффект полосы прокрутки с помощью CSS?
Это желтый прокручивающийся индикатор прогресса в верхней части, длина которого меняется по мере прокрутки страницы.
Прежде чем продолжить чтение ниже, вы можете сделать паузу. Попробуйте подумать о приведенном выше эффекте или попробуйте сами, можете ли вы умело добиться приведенного эффекта без использования JavaScript.
OK, этот эффект — похожая небольшая проблема, с которой я столкнулся в процессе своей ежедневной разработки. На самом деле, даже если мы можем использовать Javascript, это кажется очень хлопотным. Поэтому мне стало интересно, можно ли добиться этого эффекта, используя только CSS?
Проанализируйте требования
Когда я впервые увидел этот эффект, мне показалось, что эту анимацию прокрутки невозможно реализовать только с помощью CSS, поскольку она предполагает расчет расстояния прокрутки страницы.
Если вы хотите сделать это только с помощью CSS, вам придется искать другой способ и использовать какие-то хитрые методы.
Что ж, давайте используем CSS для достижения этого эффекта шаг за шагом с помощью некоторых приемов и хитростей. Проанализируйте сложность:
- Как узнать, как далеко пользователь в данный момент прокручивает страницу, и уведомить об этом верхний прогресс-бар?
Нормальный анализ должен быть таким, но это впадает в традиционное мышление. Прогресс-бар — это просто прогресс-бар, получающий информацию о расстоянии прокрутки страницы и изменяющий ее ширину. Что если бы прокрутка страницы и индикатор выполнения были единым целым?
Выполнить требование
Не будем лукавить, давайте используем linear-gradients для достижения этой функции.
Предположим, что наша страница обернута <body> в , все тело может быть прокручено, и добавим к нему этот линейный градиент снизу слева вверх справа:
body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-repeat: no-repeat;
}
Тогда мы сможем получить эффект, подобный этому:
Вау, изменение цвета желтого блока действительно может выражать общий прогресс. На самом деле, здесь вы уже должны знать, что делать дальше.
Мы используем псевдоэлемент, чтобы закрыть лишнюю часть:
body::after {
content: "";
position: fixed;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
}
Чтобы облегчить демонстрацию, я заменил белую основу выше на черную прозрачную основу:：：：.
Фактический эффект выглядит следующим образом:
Те, кто внимателен, могут заметить, что индикатор выполнения не заканчивается, когда страница прокручивается до конца.
Причина в том, что поскольку высота линейного градиента задает размер всего body, давайте отрегулируем высоту градиента:
body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
}
Здесь выполняется операция calc, и вычитается 100vh, то есть вычитается высота экрана, чтобы градиент как раз поместился в правом верхнем углу, когда он сползет в низ.
А + 5px — это высота прокручивающегося прогресс-бара, зарезервированная для 5px высоты . Взгляните на эффект, превосходно:
До сих пор это требование было выполнено идеально, что является хорошим трюком, полное Демо:
CodePen Demo — Использование линейно-градиентной реализации эффекта индикатора прокрутки
Наконец-то
Больше замечательных технических статей по CSS собрано на моем
Github-iCSS.
Ну, вот и все для этой статьи, надеюсь, она вам поможет :).