Невероятный эффект полосы прогресса прокрутки на чистом CSS

внешний интерфейс CSS
Невероятный эффект полосы прогресса прокрутки на чистом CSS

Первый вопрос: как использовать CSS для достижения следующего эффекта полосы прокрутки?

scrollbar

Это желтый индикатор выполнения прокрутки вверху, длина которого меняется по мере прокрутки страницы.

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

Хорошо, продолжайте. Этот эффект похож на небольшую проблему, с которой я столкнулся в процессе развития бизнеса. На самом деле, даже если я использую Javascript, моя первая реакция — это очень хлопотно. Поэтому мне интересно, можно ли добиться этого эффекта, используя только CSS?

image

Анализ требований

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

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

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

  • Как узнать, как далеко пользователь в настоящее время прокручивает страницу, и уведомить верхний индикатор выполнения?

Нормальный анализ должен быть таким, но это относится к традиционному мышлению. Индикатор выполнения — это просто индикатор выполнения, получающий данные о расстоянии прокрутки страницы и изменяющий ширину. Что, если бы прокрутка страницы и индикатор выполнения были единым целым?

Выполнить требование

Не продавайте, давайте использоватьЛинейный градиентдля достижения этой функции.

Предположим, что наша страница завернута в<body>, прокручиваемый объект — это все тело, и добавьте к нему этот линейный градиент от левого нижнего угла к правому верхнему:

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

Тогда мы можем получить такой эффект:

scrollbar2

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

Мы используем псевдо-элемент для покрытия большего количества частей:

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

Чтобы облегчить демонстрацию, я заменил белую основу выше на черную прозрачную основу:

scrollbar3

Фактический эффект выглядит следующим образом:

scrollbar4

Внимательные ученики могут обнаружить, что после этого при скольжении до конца полоса прогресса не заканчивается:

image

Причина в том, что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высота. Взгляните на эффект, идеально:

scrollbar

До сих пор это требование было выполнено идеально, что является хорошей маленькой хитростью, завершите демонстрацию:

Демонстрация CodePen — прокрутка индикатора выполнения с использованием линейного градиента

image

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

W3C -- чистая реализация CSS индикатора прокрутки (индикатор прокрутки)

наконец

На самом деле, это просто очень высокомерноГрадиентОчень маленькая хитрость. Для более интересного CSS, который вы не можете придумать, вы можете проверить его здесь:

CSS-вдохновение -- CSS-вдохновение

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

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

Категории