Как получить позицию полосы прокрутки с помощью Javascript?
Я пытаюсь определить положение полосы прокрутки браузера с помощью JavaScript, чтобы решить, где на странице находится текущее представление. Я предполагаю, что я должен определить, где находится большой палец на дорожке, а затем высоту большого пальца в процентах от общей высоты дорожки. Я слишком усложняю его, или JavaScript предлагает более простое решение, чем это? Есть идеи по коду?
6 ответов
можно использовать element.scrollTop и element.scrollLeft чтобы получить вертикальное и горизонтальное смещение, соответственно, которая была прокручена. element может быть document.body Если вы заботитесь о всей странице. Вы можете сравнить его с element.offsetHeight и element.offsetWidth (опять-таки, element может быть органа), если вам нужны проценты.
будет максимум значение scrollTop.
будет процент прокрутки [от 0 до 1].
Примечание: Вы можете использовать эту функцию для извлечения или установки установки.
ответ на 2018:
API наблюдателя пересечения предоставляет способ асинхронного наблюдения изменения в пересечении целевого элемента с предком элемент или с видовым окном документа верхнего уровня.
исторически, обнаружение видимости элемента или относительного видимость двух элементов в отношении друг к другу, был трудная задача, решения которой ненадежны и подвержены вызывая браузер и сайты, к которым пользователь обращается, чтобы стать вялый. К сожалению, по мере того, как сеть созрела, необходимость в этом вид информации вырос. Информация о пересечении необходима для много причин, таких как:
реализация обнаружения пересечений в прошлом событии обработчики и циклы, вызывающие такие методы, как Элемент.getBoundingClientRect() для создания необходимой информации для каждый затронутый элемент. Поскольку весь этот код работает в основном потоке, даже один из них может вызвать проблемы с производительностью. Когда сайт загруженные этими тестами, вещи могут стать совершенно уродливыми.
Размеры и прокрутка элементов
Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики».
Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript.
Простой пример
В качестве простого примера демонстрации свойств мы будем использовать следующий элемент:
У элемента есть рамка (border), внутренний отступ (padding) и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов (margin), потому что они не являются частью элемента, для них нет особых JavaScript-свойств.
Результат выглядит так:
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «content width» выше).
Метрики
Вот общая картина с геометрическими свойствами:
Значениями свойств являются числа, подразумевается, что они в пикселях.
Давайте начнём исследовать, начиная снаружи элемента.
offsetParent, offsetLeft/Top
Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.
В свойстве offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.
То есть, ближайший предок, который удовлетворяет следующим условиям:
В примере ниже внутренний
Существует несколько ситуаций, когда offsetParent равно null :
offsetWidth/Height
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Мы можем использовать это, чтобы делать проверку на видимость:
Заметим, что функция isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые
clientTop/Left
Пойдём дальше. Внутри элемента у нас рамки (border).
…Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
Она возникает, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство clientLeft включает в себя ещё и ширину полосы прокрутки.
Вот соответствующий пример на иврите:
clientWidth/Height
Эти свойства – размер области внутри рамок элемента.
Поэтому в тех случаях, когда мы точно знаем, что отступов нет, можно использовать clientWidth/clientHeight для получения размеров внутренней области содержимого.
scrollWidth/Height
Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
Нажмите на кнопку, чтобы распахнуть элемент:
scrollLeft/scrollTop
Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.
Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.
Другими словами, свойство scrollTop – это «сколько уже прокручено вверх».
В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.
Установка значения scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.
Не стоит брать width/height из CSS
Мы рассмотрели метрики, которые есть у DOM-элементов, и которые можно использовать для получения различных высот, ширин и прочих расстояний.
Почему мы должны использовать свойства-метрики вместо этого? На то есть две причины:
Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.
Обратите внимание: описанные различия касаются только чтения свойства getComputedStyle(. ).width из JavaScript, визуальное отображение корректно в обоих случаях.
Итого
У элементов есть следующие геометрические свойства (метрики):
Задачи
Найти размер прокрутки снизу
Свойство elem.scrollTop содержит размер прокрученной области при отсчёте сверху. А как подсчитать размер прокрутки снизу (назовём его scrollBottom )?
Другими словами: (вся высота) минус (часть, прокрученная сверху) минус (видимая часть) – результат в точности соответствует размеру прокрутки снизу.
Как определить текущее положение на странице (на сколько прокручен документ)
К написанию этого поста меня вынудила одна из моих статей про кнопку наверх. Дело в том, что принцип действия кнопки основывается на том же принципе что и во вконтакте — то есть при переходе наверх, есть возможность снова вернуться в то место на странице, на котором мы находились до этого.
Для этого и требуется определять и сохранять в переменную координаты расположения на странице (их можно также назвать координатами окна браузера относительно всей веб-страницы).
Теперь давайте разберёмся, как можно получить положение прокрутки при помощи JavaScript.
Координаты Y (по вертикали)
Такой вариант приходится использовать более часто, так как мало какие страницы прокручиваются по горизонтали, да и то, в большинстве случаев это баг разработчиков.
Для того, чтобы было понятно, что именно мы будем определять — небольшой рисунок:
А это Javascript-код:
Координаты X (по горизонтали)
Как я уже говорил, мне редко приходилось сталкиваться с сайтами, где используется прокрутка по горзионтали, тем не менее рассмотрим такой вариант тоже:
Пример
Если захотите опробовать этот пример — рекомендую прокручивать страницу именно колесиком мыши, а то у вас вылезет нереальное количество алертов.
Смотрите также
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
Размеры и прокрутка элементов
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll.
Для того, чтобы показывать элементы на произвольных местах страницы, необходимо во-первых, знать CSS-позиционирование, а во-вторых – уметь работать с «геометрией элементов» из JavaScript.
В этой главе мы поговорим о размерах элементов DOM, способах их вычисления и метриках – различных свойствах, которые содержат эту информацию.
Образец документа
Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), и прокрутка:
Результат выглядит так:
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки.
В этом случае полоса прокрутки «отодвигает» содержимое вместе с padding влево, отбирая у него место.
Мы должны в точности понимать, что происходит с размерами элемента при наличии полосы прокрутки, поэтому на картинке выше это отражено.
На рисунке выше поля padding изображены пустыми, но текст там вполне может быть, к примеру, при наличии вертикальной прокрутки.
Метрики
У элементов существует ряд свойств, содержащих их внешние и внутренние размеры. Мы будем называть их «метриками».
Метрики, в отличие от свойств CSS, содержат числа, всегда в пикселях и без единиц измерения на конце.
На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
Будем исследовать их снаружи элемента и вовнутрь.
offsetParent, offsetLeft/Top
Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже.
Несмотря на то, что эти свойства нужны реже всего, они – самые «внешние», поэтому начнём с них.
В offsetParent находится ссылка на родительский элемент в смысле отображения на странице.
Уточним, что имеется в виду.
Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря «дерево геометрии» или «дерево рендеринга», которое содержит всю информацию о размерах.
В примере ниже внутренний
offsetWidth/Height
Теперь переходим к самому элементу.
Для нашего элемента:
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Это даёт нам замечательный способ для проверки, виден ли элемент:
clientTop/Left
…Но на самом деле они – вовсе не рамки, а отступ внутренней части элемента от внешней.
Она возникает тогда, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство clientLeft включает в себя ещё и ширину полосы прокрутки.
clientWidth/Height
Если padding нет, то clientWidth/Height в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.
Поэтому в тех случаях, когда мы точно знаем, что padding нет, их используют для определения внутренних размеров элемента.
scrollWidth/Height
Свойства clientWidth/clientHeight относятся только к видимой области элемента, а scrollWidth/scrollHeight добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту, таким кодом:
Нажмите на кнопку, чтобы распахнуть элемент:
element.style.height = element.scrollHeight + „px“
scrollLeft/scrollTop
Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.
Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.
В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменить, и браузер выполнит прокрутку элемента.
Не стоит брать width/height из CSS
Мы рассмотрели метрики – свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.
Теперь несколько слов о том, как не надо делать.
Получение ширины элемента может быть таким:
Не лучше ли получать ширину так, вместо метрик? Вовсе нет!
Конечно, с точки зрения CSS размер auto – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина width из CSS вообще бесполезна.
Есть и ещё одна причина.
Полоса прокрутки – причина многих проблем и недопониманий. Как говорится, «дьявол кроется в деталях». Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал «глючить» с ней.
Как мы говорили ранее, при наличии вертикальной полосы прокрутки, в зависимости от браузера, устройства и операционной системы, она может сдвинуть содержимое.
Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.
Описанные разночтения касаются только чтения свойства getComputedStyle(. ).width из JavaScript, визуальное отображение корректно в обоих случаях.
Итого
У элементов есть следующие метрики:
FPublisher
Web-технологии: База знаний
JavaScript скрипты
Как прокрутить содержимое окна документа?
Размещена 3 сентабря, 2008 года
Узнать на сколько прокручен объект вниз или влево или прокрутить его на определенную велечину можно с помощью свойств scrollTop и scrollLeft объекта.
Примечание: для старых браузеров Netscape (4-6), Opera 5 следует использовать свойства pageXOffset, pageYOffset
Если браузер находится в режиме 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) так же позволяют прокуручивать содержимое объекта.
Например: window.scrollBy(0,-10); //подняться вверх на 10 пикселей
Как узнать на сколько прокручена страница (проскролленность страницы)?
Как узнать ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части?
Как узнать координаты центра окна с учетом скроллинга?
Функции getClientWidth, getClientHeight и getBodyScrollLeft, getBodyScrollTop определены выше.
