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

82

Як отримати значення позиції прокрутки документа?

jquery scroll

— Хтось
джерело

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 так сильно відрізняється? За 575 пікселів, якщо я прокрутив унизу сторінки. Куди зникли ці 575px? Рядок прокрутки не може бути 576px :)

— Хтось

3

Бааа знову моя вина. Я дивився на смугу прокрутки з відкритим вікном firebug. Часто це може бути 576px зараз. :) Дякую Я думаю, тема закрита.

— Хтось

101

-1 - Це дуже приємно, але не відповідає на питання, про яке йшлося scrollHeight.

— Уейн,

8

Правильно, це питання jquery. Але ні $ (document) .height (), ні $ (document) .scrollTop () не дають потрібної інформації. Запит був на scrollHeight. Значення scrollHeight - це загальна висота, доступна для елемента (якщо його можна прокручувати, це значення може бути більшим, ніж його висота). scrollTop повертає відстань від верху елемента. Ні відповісти, яка загальна доступна висота. Див. Help.dottoro.com/ljbixkkn.php для розуміння scrollHeight

— teynon

4

Це позначено як відповідь, оскільки воно відповідає на заплановане питання автора запитання, що стосується висоти, на якій документ прокручується в даний час ... ergo "scrollHeight". Випадково, що ця назва використовується в іншому контексті.

— Chase Sandmann

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

Гм, жоден $ (document) .offset () не повертає нуль, а .offset () не має нічого спільного з положенням смуг прокрутки браузера (.offset () повертає координати елементів відносно документа). Я погоджуюсь, що ми повинні використовувати jQuery, коли це можливо, але, мабуть, оскільки для цього немає перехресної підтримки браузера, jQuery не надає абстракції для нього.

— BrainSlugs83,

2

Ви також можете зробити $ (selector) .get (0) .scrollHeight

— Ally

1

@Dmitri Zaitsev .scrollHeight - це властивість вузла DOM, а не властивість jQuery.

— Земльорадник

45

Якщо ви використовуєте Jquery 1.6 або новішої версії, використовуйте prop для доступу до значення.

$(document).prop('scrollHeight')

Попередні версії використовувались для отримання значення з attr, але не після 1.6.

— Анкіт
джерело

12

Це повертає "undefined" для мене з jQuery 1.7.1, як і $ (document) .attr ("scrollHeight").

— Майкл

5

Це тому, що в ньому відсутній елемент тіла. Це має бути $ (document.body) .prop ('scrollHeight') - в цей момент ви також можете просто використовувати document.body.scrollHeight;

— goddogsrunning

6

document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight

— Сачин Р
джерело

так що це ідентифікатор елемента вашого об’єкта документа? ... можливо, ви мали на увазі "document.body.scrollHeight"?

— BrainSlugs83,

2

$ ('# gallery'). scrollHeight дає мені невизначений // # gallery - це ідентифікатор мого переповнення: автоматичний елемент, не працює

— Anmol Saraf

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> - 256px, ця функція дає мені 337px, і я поняття не маю, звідки вона береться. PS Я використовую Chrome 18.

— jurchiks

@jurchiks: У вас є посилання на те, де знаходиться цей iframe, щоб я подивився?

— Zuul

blade.dateks.lv/salidzinat?ids=58664,43586 . Клацніть на будь-який із знаків запитання. Мені вдалося виправити більшу частину цього, але два з них (а їх більше залежно від елементів, що порівнюються) все ще мають дивне таємниче поле ~ 20 пікселів внизу. Однак він зникає, коли я змінюю розмір вікна, оскільки я змусив його змінити розміри спливаючих вікон при зміні розміру вікна.

— jurchiks

3

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

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

— гострий
джерело

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})

— Стів
джерело