Как посмотреть количество прокрученных пикселей js

Обновлено: 26.01.2025

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

параметр функции e Не содержит этой информации.
Я могу хранить $(window).scrollTop() после каждого прокрутки и рассчитать разницу, но могу ли я сделать это по-другому?

"стоимость прокрутки" не зависит от размера окна или разрешения экрана. "Значение прокрутки" - это просто количество прокрученных пикселей.

однако, можете ли вы прокручивать вообще, и сумма, которую вы можете прокрутка основана на доступной недвижимости для контейнера и размерах содержимого внутри контейнера (в этом случае контейнер document.documentElement или document.body для старых браузеров).

вы правы, что scroll событие не содержит этой информации. Он не предоставляет delta свойство для указания количества прокрученных пикселей. Это верно для родного scroll событие и jQuery scroll событие. Это похоже на то, что было бы полезно иметь функцию, аналогичную how mousewheel события предоставляют свойства для Дельты X и Y.

delta собственность за scroll , но это выходит за рамки данной вопрос (не стесняйтесь задавать отдельный вопрос об этом).

Runnable фрагмент (прокрутите вниз и нажмите Run code snippet ):

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

чтобы определить, сколько пикселей было прокручено, вы должны иметь в виду, что scroll событие запускается почти каждый пиксель, который вы перемещаете. Способ сделать это-сохранить предыдущее прокрученное значение и сравнить его в тайм-аут. Вот так:

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

другой способ сделать это? Да, возможно, с jQuery Mobile
Я не ценю это решение, потому что необходимо включить тяжелый jQuery mobile. Решение:

уменьшить используемую вычислительную мощность, добавив таймер к методу прокрутки Jquery, вероятно, не является хорошей идеей. Визуальный эффект действительно довольно плохой.

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

Узнать на сколько прокручен объект вниз или влево или прокрутить его на определенную велечину можно с помощью свойств scrollTop и scrollLeft объекта.

Примечание: для старых браузеров Netscape (4-6), Opera 5 следует использовать свойства pageXOffset, pageYOffset

document.getElementById('Layer1').scrollTop //Прочитать значение scrollTop
document.getElementById('Layer1').scrollTop = 50; //Прокрутить от верха на 50 вниз

Но когда дело касается прокрутки всего документа, то нужно учитывать наличие в документе конструкции !DOCTYPE. Если !DOCTYPE переключает браузер в режим следования стандартам, то некоторые свойства объекта document.body становятся доступными лишь через объект document.documentElement, это относится и к свойствам scrollLeft, scrollTop.

Если браузер находится в режиме CSS1Compat (режим следования стандартам), что можно узнать из свойства document.compatMode, document.body.scrollLeft и document.body.scrollTop всегда будут равны нулю, а правильные значения можно получить через document.documentElement.scrollTop и document.documentElement.scrollLeft. Но все меняется наоборот если браузер находиться в режиме обратной совместимости (document.compatMode == "BackCompat").

Ниже показано как узнать значения scrollTop и scrollLeft для тела документа:

* На заметку: методы scrollBy(numHorz, numVert) и scrollTo(numX, numY) так же позволяют прокуручивать содержимое объекта.

scrollBy(numHorz, numVert) - прокручивает на указанное смещение от текущего положения (numHorz, numVert могут принимать положительные, отрицательные значения, а так же 0 для того чтобы отсавить положение без изменения).

scrollTo(numX, numY) - прокручивает содержимое к определенной позиции.

Например: window.scrollBy(0,-10); //подняться вверх на 10 пикселей

Как узнать на сколько прокручена страница (проскролленность страницы)?

Как узнать ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части?

Как узнать координаты центра окна с учетом скроллинга?

Функции getClientWidth, getClientHeight и getBodyScrollLeft, getBodyScrollTop определены выше.

Я хочу получить значение px , когда я scroll в jQuery.

Например, в середине страницы я scroll немного вниз. Здесь я хочу знать, сколько px я прокрутил. (3px, 5px. 10px, 11px ?)

Независимо от положения скроллера.

Если мой скроллер находится в 300px сверху. Я прокрутил 10px. Итак, мой скроллер теперь находится на уровне 310 пикселей. Как получить значение, которое я прокрутил (здесь: 10px ?)

Возможно ли это ?

2 ответа

Я пытаюсь вычислить переменное количество пикселей для независимых от плотности пикселей и наоборот. Эта формула (px to dp): dp = (int)(px / (displayMetrics.densityDpi / 160)); не работает на небольших устройствах, потому что она делится на ноль. Это моя формула dp to px: px = (int)(dp *.

Я ищу способ определить количество прокручиваемой страницы на%, а не на px, подумайте: function doBanner() < var scrollPos = $( window ).scrollTop(); if ( scrollPos > 250 && !uped && !doing)< up(); >else if ( scrollPos <= 250 && !doing && uped ) < down(); >В.

Вот рабочий пример кода :

Тайм-аут необходим для предотвращения многократного срабатывания события scroll и получения неправильного значения.

Этот образец напечатает, сколько пикселей он переместил после 200 мс

EDIT:

использование таймера (который никоим образом не является точным) :

Создадим HTML структуру

Сделаем блок <div ></div> с большим количеством текста для тестирования индикатора прокрутки

Элемент индикатора прокрутки в разметку не добавляем, так как будем создавать и добавлять его динамически через JavaScript

Пишем CSS стили

Стилей для индикатора прокрутки также не пишем, они будут добавляться через JavaScript

Пишем JavaScript код

Полный код с комментариями

Рассмотрим код пошагово

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

Создадим основную функцию, чтобы вся логика индикатора прокрутки была в одном месте

Сразу же вызовем эту функцию для просмотра результата в браузере

Создадим элемент <div></div>

Назначим ему класс progress - <div ></div>

Так как мы создали новый элемент, то можем ему назначить инлайновые стили через line.style.cssText .

cssText перезаписывает все существующие стили, поэтому его актуально использовать для новых элементов

Стили в cssText запишем используя обратные кавычки для лучшей читаемости

В результате получим такой элемент - <div style="height: 6px; background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(123, 67, 151), rgb(220, 36, 48)) repeat scroll 0% 0%; position: fixed; top: 0px; left: 0px; transition: all 1s ease 0s; z-index: 99999;"></div>

Вставим созданный элемент в начало <body>

Напишем функцию progressWidth, которая будет рассчитывать и возвращать ширину индикатора прокрутки в процентах в зависимости от прокрутки страницы

Логика расчета - узнаём на сколько страница прокручена и делим это значение на разницу полной высоты страницы и высоты окна браузера, и полученный результат умножаем на 100, чтобы получить значение в процентах

Math.floor() - округляет до ближайшего меньшего целого числа

Вызовем функцию progressWidth сразу после объявления, чтобы индикатор прокрутки отображался корректно при загрузке страницы

Также будем вызывать функцию progressWidth при прокрутке страницы и изменении размеров окна браузера

Передаем только название функции progressWidth без круглых скобок, так как необходимо чтобы она вызывалась только при событии прокрутки страницы или изменении размеров окна браузера

Индикатор прокрутки готов, но я хотел бы обратить внимание на оптимизацию при использовании событий прокрутки страницы и изменении размеров окна браузера - об этом ниже

Функция-декоратор throttle

События при прокрутке страницы или изменении размеров окна браузера происходят с очень высокой частотой, то есть функция progressWidth будет вызываться и производить расчеты очень много раз за короткий промежуток времени. При одной прокрутке колесика мыши может срабатывать около 20 событий. Это влияет на производительность. Чтобы ограничить количество вызовов, напишем простую реализацию функции-декоратора throttle

Функция-декоратор - оборачивает исходную функцию, для дополнительных возможностей работы с ней

Рассмотрим функцию throttle по шагам

Объявляем функцию throttle с параметрами func и ms, которая будет ограничивать частоту вызова функции func временным промежутком указанным в миллисекундах ms

Параметр func - исходная функция, которую будем оборачивать для дополнительных возможностей, в данном случае функция progressWidth для расчета ширины индикатора прокрутки

Параметр ms - временной промежуток в миллисекундах, на время которого будет блокироваться вызов функции func при высокой частоте вызовов

Объявим переменную locked, которая будет отвечать за блокировку вызова функции func пока не закончится промежуток времени, переданный в парамере ms

Создадим анонимную функцию, код которой будет выполнятся в зависимости от значения переменной locked

Анонимная функция имеет доступ к переменной locked.

Если значение переменной locked равно true, то прерываем выполнение функции и дальнейший код не будет выполнен

Изначально значение переменной locked равно false, поэтому анонимная функция продолжает выполняться

Чтобы заблокировать следующие вызовы анонимной функции, установим значение переменной в true

Используем метод setTimeout для отложенного запуска части кода и в качестве задержки подставляем переданный параметр ms

Когда промежуток времени заканчивается, выполняем переданную функцию func и снимаем блокировку

Теперь при событиях прокрутки страницы или изменении размеров окна браузера будем передавать функцию progressWidth не напрямую, а через функцию-декоратор throttle

Выглядить это будет следующим образом

Для понимания мы могли создать переменную/константу для результата функции throttle(progressWidth, 64) таким образом

В константе progressThrottle хранилась бы анонимная функция, которая находится внутри функции throttle, но уже с переданными параметрами - функцией progressWidth, и временем блокировки 64

Тогда выглядело бы это следующим образом

Опять же передаем только название функции progressThrottle без круглых скобок, так как необходимо чтобы она вызывалась только при событии прокрутки страницы или изменении размеров окна браузера

Написанную функцию throttle можно использовать и для других функций, нужно всего лишь в параметрах передать необходимую функцию и желаемое время блокировки

Итоги

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

Разобрались с простой реализацией функции-декоратора для оптимизации высокочастотных вызовов при прокрутке страницы и изменении размеров окна, которую также можно использовать в верстке при необходимости оптимизации

Читайте также: