«Это 23-й день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г."
🎄 Предисловие
Когда Сяобао изучал «Вводное руководство по ES6» Руана Ифэна, он ответил на начало статьи.прогресс чтенияФункция вызвала большой интерес. Сяобао догадался, что его следует использоватьJavaScriptДобиваюсь, но в последнее время полюбил множествоCSS, поэтому у Сяобао была смелая идея, простаяCSSМожно ли реализовать функцию прогресса чтения?
Может, не только может, но и очень умный!CSS⭐CSS⭐CSSДействительно слишком сильно.
Хотя черезCSSПроблемы с прогрессом чтения могут быть достигнуты, ноJavaScriptКак ветеран, вы также должны быть опытными.
Так что узнать эту статью, вы можете узнать:
- использовать
JavaScriptРеализовать функцию прогресса чтения - использовать
CSSРеализовать функцию прогресса чтения
🔥 Используйте JavaScript для достижения прогресса в чтении
📃 HTML и CSS
html cssчасть очень проста, путем вложения двухdivреализация, внешнийdivОбеспечивает базовый цвет фона, интерьераdivПоказать прогресс чтения
<div class="read_pro">
<div class="read_pro_inner"></div>
</div>
.read_pro {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #DDD;
}
.read_pro_inner {
content: '';
position: absolute;
left: 0;
height: 100%;
background-color: #0089f2;
}
когда мы устанавливаем.read_pro_innerширина20%, результирующее изображение выглядит следующим образом:
Сделайте скриншот только части изображения и увеличьте масштаб в браузере, иначе серая часть будет очень длинной
Стол накрыт, следующий пропускjsдля динамического расчетаread_pro_innerизwidthВот и все.
🎬JS-реализация
если мы используемJavaScriptЧтобы добиться прогресса чтения, нам нужно получить общую высоту документа, расстояние прокрутки документа и видимую высоту окна браузера.
- Общая высота документа:
document.documentElement.scrollHeight - Видимая высота окна:
document.documentElment.cliengHeight - Расстояние прокатки:
document.documentElement.scrollTop || document.body.scrollTop
Просто глядя на названия трех вышеперечисленных атрибутов, немного сложно понять, давайте посмотрим на схематическую диаграмму.
Как видно из приведенного выше рисункаscrollTopчасть прочитанного документа, которая свернута,scrollHeightобщая длина документа,clientHeightвысота области отображения браузера
Источник:Примечания к МООК
После получения вышеуказанных значений атрибута ход чтения можно рассчитать по следующей формуле
readProInner.style.width = +(scrollTop / (scrollHeight- clientHeight)).toFixed(2)*100 + '%'
Вам может быть интересно, почему знаменательscrollHeight- clientHeightвместоscrollHeight?
Когда полоса прокрутки прокручивается вниз, браузер по-прежнему отображает экран содержимого, и полоса прокрутки больше не может прокручиваться.scrollTopНевозможно увеличить, поэтомуscrollTopМаксимальное значениеscrollHeight- clientHeight, если использоватьscrollHeightКак знаменатель, прогресс чтения не может быть достигнут в конце100%.
document.addEventListener('scroll', function(e) {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
readProInner.style.width = +(scrollTop/(scrollHeight-clientHeight)).toFixed(2)*100 + '%'
})
использоватьjsРеализация требует контроляscrollсобытий и может быть частым при прокруткеscrollИнициирование события может привести к определенной потере производительности, так что давайте учиться вместеcssПлан реализации
🌟 Прогресс чтения с помощью CSS
использоватьCSSСпособ достижения прогресса в чтении очень интересный и очень оригинальный, много говорить не буду, давайте посмотрим.
📕Предварительные знания
-
linear-gradient: Линейный градиент, первый параметр — это направление градиента, за которым следует изменение цветовой шкалы.например, установка
linear-gradient(to right top, #0089f2 50%, #DDD 50%)Можно добиться следующего эффекта, синий треугольник:
Глядя на этот синий треугольник, чувствуете ли вы, что приближаетесь к своему прогрессу в чтении?
Если мы накроем синий блок белым блоком и оставим только шов вверху, не будет ли нижний край отображаемого в данный момент синего блока прогрессом чтения?
Наконец, разберитесь с проблемой последнего экрана, чтобы при прокрутке полосы прокрутки вниз прогресс чтения достигал
100%Если вы не понимаете принцип здесь, не волнуйтесь, я продемонстрирую более подробно позже.
-
@supports
похожий наjsФункциональная проверка банкиCSSПоддерживается ли свойство или функция текущим браузером.
💡 Принцип реализации
объяснено вышеlinear-height, мы предложили решение: использовать белый блок, чтобы закрыть синий блок, оставив только шов вверху, а длина отображаемой синей полосы - это прогресс чтения
Не сложно просто сказать фальшивая ручка.Для того,чтобы всем было понятно принцип,мы используем чехол для его имитации.Синий блок остается оригинального размера и использует0.8Прозрачный черный блок закрыт сверху, а черный блок остается пустым для синего блока сверху.10pxпространство. Смотрите демо ниже
Чувствуете ли вы сейчас внезапный всплеск возбуждения?
💻 Реализация CSS
- первое использование
linear-gradientРеализуйте блок синего фона и очистите последний экран.
body{
background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
/* 通过 calc 函数配合 100vh 就可以从总长中删除一屏的高度 */
/* 100vh 浏览器视口的高度 */
background-size: 100% calc(100% - 100vh + 4px);
background-repeat: no-repeat;
}
- Установите белые блоки, закрывающие синие блоки
Высота индикатора выполнения чтения3px, поэтому установите высоту белого блока на100% - 3px, вы можете добавить ещеdivэлемент для установки белого блока, но в качестве элементов рекомендуются небольшие пакеты:before/:after, псевдоэлементов нет в потоке документа, что удобно для отрисовки и контроля
body:before{
content:'';
/* fixed定位 */
position: fixed;
/* 同时设置 top 和 bottom 可以拉伸 height */
/* 设置高度为 100% - 3px */
top: 3px;
bottom: 0;
width: 100%;
/* 降低层级，白块显示在文字之下 */
z-index: -1;
background: white;
}
С помощью приведенного выше простого кода вы можете добиться эффекта прогресса чтения обложки, посыпать цветами ~~~~
🛕 Репозиторий исходного кода
Портал:Функция прогресса чтения
Не забудьте поставить пакету ⭐, если вы считаете его полезным.
💘 Предыдущие замечательные статьи
- Последний письменный тест Nioke по интерфейсу JS, 100 вопросов
- Резюме последних предварительных вопросов интервью Ниуке (включая анализ)
- CSS реализует свободно летящую птицу 🐦
- Получите последние предварительные вопросы интервью Niuke и 500 горячих точек интервью JS для анализа данных.
- Примите кошку для VSCode и веб-сайта
- Душевная пытка родного JavaScript (1), сколько вы можете ответить?
- Глубокое понимание прототипа и цепочки прототипов в JavaScript
- Глубокое понимание EventLoop в JavaScript
- «2w Word Big Chapter 38 Interview Questions» подробно разъясняет эту проблему указания в JS.
- Ссылка на ссылку:Наггетс.Талант/пост/691163… код spray.IO/сделано Майком/…
💥 Послесловие
Друзья, если вы чувствуете, что эта статья вам полезна, ставьте лайк Абао👍 или подписывайтесь➕ — это самая большая поддержка для меня.
Кроме того, если есть какие-либо проблемы с этой статьей или если вы не понимаете часть статьи, вы можете ответить мне в области комментариев, давайте обсудим, изучим и добьемся успеха вместе!
Если вы чувствуете, что область комментариев неясна, вы также можете добавить мой WeChat (li444186976) или qq (3315161861) для подробного общения, название - пакет поля боя.