Как получить позицию прокрутки с помощью Javascript?

Question

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

Answer 1

Вы можете использовать element.scrollTop и element.scrollLeft, чтобы получить вертикальное и горизонтальное смещение, соответственно прокрутившееся. element может быть document.body если вас интересует вся страница. Вы можете сравнить его с element.offsetHeight и element.offsetWidth (опять же, element может быть телом), если вам нужны проценты.

Answer 2

document.getScroll= function(){ 
if(window.pageYOffset!= undefined){ 
    return [pageXOffset, pageYOffset]; 
} 
else{ 
    var sx, sy, d= document, r= d.documentElement, b= d.body; 
    sx= r.scrollLeft || b.scrollLeft || 0; 
    sy= r.scrollTop || b.scrollTop || 0; 
    return [sx, sy]; 
} 
} 

возвращает массив с двумя integers- [scrollLeft, scrollTop]

Answer 3

Я сделал это для <div> на Chrome.

элемент.scrollTop - это пиксели, скрытые в верхней благодаря свитка. При отсутствии свитка его значение равно 0.

элемент.scrollHeight - это пиксели всего дел.

элемент.clientHeight - это пиксели, которые вы видите в вашем браузере.

var a = element.scrollTop; 

будет положение.

var b = element.scrollHeight - element.clientHeight; 

будет значение максимального для scrollTop.

var c = a/b; 

будет процент прокрутки [от 0 до 1].

Answer 4

Если вы используете JQuery есть идеальная функция для вас: .scrollTop()

документ здесь ->http://api.jquery.com/scrollTop/

Примечание: Вы можете использовать эту функцию, чтобы получить или установить позицию.

Смотри также: http://api.jquery.com/?s=scroll

Answer 5

Ответ на 2018:

Лучший способ сделать такие вещи, как это использовать Intersection Observer API.

Пересечение наблюдатель API предоставляет возможность наблюдать асинхронно изменения в пересечении целевого элемента с предком элемента или окна просмотра копии документа верхнего уровня является.

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

• отложенной загрузки изображений или другого содержимого, как страница прокручивается.
• Внедрение веб-сайтов «бесконечной прокрутки», где все больше и больше контента загружается и отображается при прокрутке, так что пользователю не нужно переходить через страницы .
• Отчетность о видимости рекламы для расчета доходов от рекламы.
• Решение о выполнении или выполнении задач или процессов анимации в зависимости от того, увидит ли пользователь результат.

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

Смотрите следующий пример кода:

var options = { 
    root: document.querySelector('#scrollArea'), 
    rootMargin: '0px', 
    threshold: 1.0 
} 

var observer = new IntersectionObserver(callback, options); 

var target = document.querySelector('#listItem'); 
observer.observe(target); 

browser support Как не велик, вы должны использовать IntersectionObserver polyfill.