Функция JQuery $(window).height() не возвращает фактическую высоту окна

У меня есть страница, в которой мне нужно динамически загружать содержимое ajax, когда пользователь прокручивается вниз. Проблема в том, что JQuery не возвращает правильную высоту окна. Я использовал эту функцию раньше и никогда не видел ее сбой, но по какой-то причине она вернет то же значение, что и высота документа. У меня есть тестовая страница здесь: bangstyle.com/test-images

Я закодировал предупреждение для отображения при загрузке страницы, а также каждый раз, когда пользователь прокручивает 500 пикселей ниже:

function scroller() {

                        if($(window).scrollTop() > 500){

                        delay(function(){ //200ms wait
                                pagecounter++;
                                sideshow();
                                alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());

                                return false;
                            }, 200 );

                                    }
                            }

Я пробовал опубликовать это раньше, но я удалил его, так как я не получил решение. Я надеюсь, что можно опубликовать ссылку на мою тестовую страницу. BTW Я тестировал это на Mac Safari и Mac FF. Я запустил этот же код на других страницах, и он отлично работает. Я чувствую, что в доме этой страницы должно быть что-то, что заставляет JS терпеть неудачу, но не знаю, что бы это было.

Ответы

Ответ 1

Посмотрите на свой код HTML-кода. Первая строка должна быть <!DOCTYPE html>, и вместо этого вы используете тег <style>.

Итак, кажется, что ваш документ запущен в режиме Quirks, и jQuery не может рассчитать правильные размеры окна.

Ответ 2

//works in chrome
$(window).bind('scroll', function(ev){

    //get the viewport height. i.e. this is the viewable browser window height
    var clientHeight = document.body.clientHeight,
        //height of the window/document. $(window).height() and $(document).height() also return this value.
        windowHeight = $(this).outerHeight(),
        //current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
        scrollY = $(this).scrollTop();

    if( windowHeight - clientHeight === scrollY ){
        console.log('bottom');
    }

});

Ответ 3

У меня была та же проблема. Я нашел некоторые вещи:

1) проблема возникает, когда вы пытаетесь получить фактическую высоту до того, как документ будет завершен; 2) проблема возникает в Google Chrome, когда вы не используете кортеж DOCTYPE (упомянутый выше) 3) это всегда происходит в google chrome даже после того, как документ отображается полностью.

Для google chrome я нашел обходное решение здесь: get-document-height-cross-browser Я использую это решение только для google chrome, и он решил мою проблему, я ожидаю, что это поможет кому-то, у кого еще есть проблема.

Ответ 4

Это старый вопрос, но я недавно боролся с тем, что не получил правильную высоту окна в IE10 на несколько пикселей.

Я обнаружил, что IE10 применяет 75% масштабирование по умолчанию и закручивает измерения окна и документа.

Итак, если у вас неправильная ширина или высота, убедитесь, что значение масштабирования установлено на 100%.

Ответ 6

Так как jquery (и dom в целом) не правильно вычисляет размеры в quirksmode, два решения:

  • Добавить doctype html в верхней части страницы (как указано в "правильном" ответе) или
  • Используйте window.innerHeight, window.innerWidth, если первый параметр не является параметром.

Надеюсь, что это поможет.

Ответ 7

Я переместил свои сценарии с нижнего колонтитула и решил это для меня.