Как мне узнать позицию прокрутки документа?

82

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

Кто-то
источник

Ответы:

46
$(document).height() //returns window height

$(document).scrollTop() //returns scroll position from top of document
Боб Грегор
источник
Я думал так же, но почему console.log ($ (this) .scrollTop ()) = 1187 console.log ($ (this) .height ()) = 1762 так сильно отличается? Для 575px, если я прокрутил страницу до конца. Куда пропали те 575 пикселей? Полоса прокрутки не может быть 576 пикселей :)
Кто-то
3
Бааа снова моя вина. Я смотрел на полосу прокрутки с открытым окном firebug. Офк сейчас это может быть 576 пикселей. :) Спасибо, наверное, тема закрыта.
Кто-то
101
-1 - Очень красиво, но не отвечает на вопрос, о котором шла scrollHeight.
Уэйн
8
Правильно, это вопрос jquery. Но ни $ (document) .height (), ни $ (document) .scrollTop () не дает желаемой информации. Запрос был для scrollHeight. Значение scrollHeight - это общая высота, доступная элементу (если он прокручивается, это значение может быть больше его высоты). scrollTop возвращает, насколько далеко от вершины будет находиться элемент. Также не ответьте, какова общая доступная высота. См. Help.dottoro.com/ljbixkkn.php для понимания scrollHeight
teynon
4
Это помечено как ответ, потому что он отвечает на предполагаемый вопрос спрашивающего, который касался высоты, на которой документ прокручивается в данный момент ... ergo "scrollHeight". По совпадению это имя используется в другом контексте.
Чейз Сандманн
177

Вот как получить scrollHeightэлемент, полученный с помощью селектора jQuery:

$(selector)[0].scrollHeight

Если selector- это идентификатор элемента (например,elemId ), гарантируется, что элемент массива с индексом 0 будет тем элементом, который вы хотите выбрать, и scrollHeightбудет правильным.

Демвис
источник
12
Позаботьтесь, по базе знаний Mozilla, оно не поддерживается IE версий менее чем 8.0 developer.mozilla.org/en/DOM/element.scrollHeight
yodabar
2
Согласовано с @Tomas, используйте абстракцию jQuery для лучшей обработки кроссбраузерных причуд. Например, указанное выше может быть изменено на $ (selector) .offset (). Top
Боб Грегор,
3
Гм, no $ (document) .offset () возвращает null, а .offset () не имеет ничего общего с положением полос прокрутки браузера (.offset () возвращает координаты элементов относительно документа). Я согласен с тем, что мы должны использовать jQuery, когда это возможно, но, очевидно, поскольку для этого нет кроссбраузерной поддержки, jQuery не предоставляет для этого абстракции.
BrainSlugs83
2
Вы также можете сделать $ (selector) .get (0) .scrollHeight
Ally
1
@Dmitri Zaitsev .scrollHeight - это свойство узла DOM, а не свойство jQuery.
Zemljoradnik
45

Если вы используете JQuery 1.6 или выше, используйте prop для доступа к значению.

$(document).prop('scrollHeight')

Предыдущие версии получали значение из attr, но не из публикации 1.6.

Анкит
источник
12
Это возвращает "undefined" для меня с jQuery 1.7.1, как и $ (document) .attr ("scrollHeight").
Michael
5
Это потому, что отсутствует элемент body. Это должен быть $ (document.body) .prop ('scrollHeight') - в этот момент вы можете просто использовать document.body.scrollHeight;
goddogsrunning
6
document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight
Сачин Р
источник
так каков идентификатор элемента вашего объекта документа? ... возможно вы имели в виду "document.body.scrollHeight"?
BrainSlugs83
2
$ ('# gallery'). scrollHeight дает мне undefined // # галерея - это идентификатор моего переполнения: элемент auto, не работает
Анмол Сараф
6

Он использует элементы HTML DOM, но не селектор jQuery. Его можно использовать как:

var height = document.body.scrollHeight;
аква
источник
3

Что-то вроде этого должно решить вашу проблему:

$.getDocHeight = function(){
     var D = document;
     return Math.max(Math.max(D.body.scrollHeight,    D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};

alert( $.getDocHeight() );

Ps: Вызывайте эту функцию каждый раз, когда она вам нужна, предупреждение предназначено для тестирования ..

Зуул
источник
У меня почему-то некорректно работает эта функция; используя его внутри iframe. Фактическая высота <html> составляет 256 пикселей, эта функция дает мне 337 пикселей, и я понятия не имею, откуда это. PS Я использую Chrome 18.
jurchiks
@jurchiks: У вас есть ссылка на этот iframe, чтобы я мог посмотреть?
Зуул
blade.dateks.lv/salidzinat?ids=58664,43586 . Щелкните любой из вопросительных знаков. Мне удалось исправить большую часть этого, но два из них (и их больше, в зависимости от сравниваемых элементов) все еще имеют какое-то странное, загадочное поле ~ 20 пикселей внизу. Он исчезает, когда я изменяю размер окна, потому что я заставил его изменить размеры всплывающего окна при изменении размера окна.
юрчики
3

Чтобы получить фактическую высоту прокручиваемых областей, прокручиваемых полосой прокрутки окна, я использовал $('body').prop('scrollHeight') . Это кажется самым простым рабочим решением, но я тщательно не проверял совместимость. Эмануэль Дель Гранде отмечает другое решение, которое, вероятно, не будет работать для IE ниже 8.

Большинство других решений отлично работают для прокручиваемых элементов, но это работает для всего окна. Примечательно, что у меня была та же проблема, что и у Майкла, для решения Ankit, а именно: $(document).prop('scrollHeight')оно возвращается undefined.

Acjay
источник
1

Попробуй это:

var scrollHeight = $(scrollable)[0] == document ? document.body.scrollHeight : $(scrollable)[0].scrollHeight;
Дмитрий Комин
источник
0

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

Помните: jQuery может принимать функцию вместо значения в качестве аргумента. «this» - это объект, обрабатываемый jQuery, функция возвращает свойство scrollHeight текущего DIV «this» и делает это для всех DIV в документе.

$("div").scrollTop(function(){return this.scrollHeight})
Стив
источник