Как сделать индикатор прогресса прокрутки на js
Обновлено: 02.07.2024
Я пытаюсь закодировать индикатор выполнения индикатора прокрутки в React. Я работаю с Jquery, но хотел бы знать, как это сделать с чистым Javascript.
Кроме того, я должен заняться этим в чистом Javascript? Мне сказали, что Jquery не должен использоваться в React.
2 ответа
Это единственное место, где вы использовали JQuery? Если это так, я бы порекомендовал отказаться от него для чистого JavaScript. Все, что вы можете делать с JQuery, вы также можете делать с React и чистым JavaScript, и здесь не стоит лишних затрат.
Вот чистая версия JavaScript вашей функции handleScroll . Обратите внимание, что высота документа печально известна, но я выбрал подход этот вопрос (который просто воспроизводит реализацию JQuery).
Обновить
Если вы хотите получить позицию прокрутки внутри элемента, вам понадобится что-то вроде
Чтобы ответить на ваш второй вопрос: в данном конкретном случае вы можете просто придерживаться jQuery (хотя я предпочитаю версию vanilla javascript).
Вы когда-нибудь были на сайте, где прокрутка кажется бесконечной, и вы читаете и читаете, а документ просто не останавливается? В последнее время многие веб-сайты (в основном страницы, на которых публикуются длинные статьи) начали реализовывать своего рода индикатор, отображаемый в индикаторе выполнения, расположенном в верхней части документа, который обновляется при прокрутке пользователя вниз. Прогресс зависит от того, насколько далеко вы прокрутили статью, довольно просто и круто, не так ли? Это помогает пользователю узнать, как далеко он закончил публикацию. Многие дизайнеры говорят, что индикатор выполнения вверху полезен и сочетается с дизайном веб-страницы, однако разработчики считают эту функцию бесполезной, потому что уже есть полоса прокрутки, прогресс которой почти такой же, как на вершина. На какой ты стороне?
Если вы ищете реализацию такой функции на своем веб-сайте с помощью плагина jQuery, то вы попали по адресу. В этой статье мы собираемся объяснить, как использовать плагин jQuery PrognRoll для создания этого индикатора в окне.
Скачайте и включите PrognRoll
PrognRoll это небольшой, легкий плагин jQuery, который создает полосу прокрутки на странице. Его использование и настройка довольно просты, и он весит всего 966 байт, что делает его более привлекательным.
Чтобы использовать PrognRoll, загрузите файл с исходным кодом или сверните в хранилище. Затем добавьте ссылку на скрипт с тегом script:
Как видите, для PrognRoll требуется только файл скрипта, а настройку (ширину и цвет фона индикатора выполнения) можно выполнить напрямую с помощью JavaScript.
Если вы хотите протестировать библиотеку, вы можете просто использовать CDN:
Использование PrognRoll
Использование PrognRoll действительно просто, оно позаботится о создании индикатора выполнения, поэтому вам не нужно добавлять дополнительную разметку. Плагин может быть инициализирован двумя различными способами: либо для отслеживания всего документа, либо для пользовательского элемента, который можно прокручивать в документе:
Индикатор выполнения в документе
Чтобы создать индикатор выполнения прокрутки во всем документе, просто выберите элемент body документа с помощью jQuery и инициализируйте плагин на нем:
Индикатор выполнения в пользовательском элементе
Если вместо измерения хода выполнения всего документа вы можете показать ход выполнения пользовательского элемента, выбрав свой элемент с помощью jQuery, а затем примените к нему плагин. Не забудьте установить custom свойство к истине:
Не так давно я заметил индикатор прокрутки страницы на блоге Binance, очень понравилась эта фишка. Желтая полоска под фиксированным меню, двигающаяся во время скроллинга страницы. Она отображает прогресс чтения текста. Похожая вещь мне также попалась на глаза во время чтения одной из статей на площадке telegraph. Именно тогда я понял, что очень хочу реализовать это на своем блоге.
Этот пост будет очень интересным для тех кто любит WordPress. Помимо реализации Scrolling Progress Bar, я покажу возможности своего wordpress шаблона. Расскажу про функционал элементов и хуков. А также покажу как правильно использовать jQuery в WordPress. Особенно будет полезно для тех, кто не понимает почему у него не работают на блоге скрипты jQuery. Я думаю будет круто. Данный пост я буду всегда рад пополнить исходя из ваших проблемных вопросов в комментариях.
Индикатор прокрутки страницы
Сам код индикатора я довольно быстро нашёл в интернете, выглядел он примерно следующим образом.
Ну и собственно сам jQuery, то место где происходит всё волшебство.
Почему jQuery может не работать в WordPress?
Многие пробуют запустить куски кода jQuery и у них ничего не работает, после чего они его начинают подключать его шапке и вроде как проблема решается, я раньше сам так делал. Вот только это не правильно. Дело в том, что WordPress поставляется с уже предустановленной в ядре библиотекой, которую вам необходимо использовать в своем коде. Проблема кроется в режиме совместимости, в котором вам нельзя использоваться в сценариях псевдонимом идентификатора $, т.е. код должен выглядеть следующим образом:
Соответственно из за этого он становится громоздким и совершенно не читаемым. И правильнее будет сделать вот так:
На выходе получаем рабочий jQuery код способный без проблем работать в нашем WordPress.
Тема GeneratePress для WordPress и его хуки
За 8 лет на данном блоге я перепробовал целую кучу различных тем(шаблонов). И скажу вам честно, что тема GeneratePress — это лучшее что случалось с моим блогом. Я не буду сейчас останавливать подробно на обзоре данного шаблона. Это тема не одного поста. В дальнейшем я планирую делать основной упор в рубрике wordpress именно на этот шаблон, рассказывая о его функционале и о том как с ним работать.
На моём блоге есть главное меню, которое фиксируется при скроллинге страницы вниз. Именно туда я хочу поместить мой индикатор прокрутки страницы. И для этого в функционале GeneratePress есть специальные элементы с возможностью вставки хуков. Выглядит это так:
Хук: generate_inside_navigation
С помощью хуков я легко вставляю любой текст, код и шорткод в нужное место моего шаблона. В данном примере хук определяет место в фиксированном меню, как раз там где мне это нужно.
Элементы шаблона GeneratePress
Вот только некоторые элементы из того что работает на блоге на блоге:
Дневник Джека Telegram канал моих торговых крипто идей! Если вы любите криптовалюты, то этот Telegram канал для вас. Только дельные советы, когда купить, что купить, какие монеты лучше. Полностью бесплатно
Криптопираты наш Telegram чат, все любители криптовалют добро пожаловать!
Donate на этой странице вы можете поддержать меня, отблагодарить и помочь развитию моих проектов
Уверен, что многие во время чтения в интернете или прохождения анкеты хоть раз видели полосы прокрутки, которая отображается сколько посетитель уже прокрутил до конца страницы (или конкретного блока с содержимым). Это эффективно с точки зрения определения времязатрат на чтение/просмотр. В данной статье мы это реализуем на CSS3.
Принципы работы полосы прокрутки:
При прокрутке (скроллинге) индикатор будет двигаться вправо.
Если весь материал влезает у посетителя в экран, то индикатор не отображается.
Код состоит из двух частей: html и css. Сам документ будет содержать следующее:
Код HTML
Сам индикатор или полоса прокрутки находится в header, там же расположен заголовок страницы. Следом идёт main с самим контентом (в данном случае длинным текстом). В нём располагаем несколько параграфов. Конечно же, в качестве контента могут выступать изображения (галерея) и прочее.
Конечно же, количество текста Lorem Ipsum (шаблонный текст) я в данном фрагменте существенно сократил. В демонстрации он будет значительно больше, чтобы у тех, кто имеет большое разрешение полоса прокрутки отобразилась. Соответственно, если текст умещается весь, то полоса прокрутки не отображается.
Код CSS3
Как и в большинстве примеров, сразу убираем лишние отступы у тегов html и body, дальше фиксируем header. Для header (где заголовок) задаём высоту и ширину, а также цвет заднего фона. У тега main мы делаем отступ сверху, чтобы содержимое страницы не уходило под блок, когда страница находится вверху.
А уже с помощью CSS3 производим расчёт, насколько процентов была прокручена страница, и рисуем градиент в виде полосочки.
Читайте также: