Смущает размерность документа в JavaScript

Я постараюсь ответить так же просто, как я могу.

Документ и видовой экран

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

При прокрутке вниз окно просмотра перемещается вниз по документу на определенное количество пикселей. Другими словами, видовой экран-это собственно окно браузера "граница" (панели инструментов, меню, вкладки и т. д.).

Путаница возникает из-за того, что в зависимости от браузера и режима для получения размеров документа и видового экрана используются различные свойства, и они возвращают различные результаты в зависимости от полос прокрутки. Но мы еще вернемся к этому.

Обзор Размеров

Существует ряд свойств, доступных вам с самого начала в javascript, которые дают вам различные измерения.

1. Разрешение экрана: window.screen.width -Height

2. Доступное пространство экрана (такое же, как разрешение монитора) минус доки, панели инструментов и другие элементы пользовательского интерфейса: window.screen.availWidth -Height.

3. Размеры документа: document.documentElement.offsetWidth -Height Примечание: эти цифры не включают полосы прокрутки.

4. Размеры видового экрана: window.innerWidth -Height

   • Эти цифры включают в себя полоса прокрутки.

   • Это недоступно в IE 8 - и IE9, поэтому если IE, тест для document.compatMode === "CSS1Compat" и если true, используйте document.documentElement.clientWidth -Height, а для режима quirks используйте document.body.clientWidth -Height.

Примечание об измерениях документа

Как указано выше, document.documentElement.offsetWidth/Height предоставляет вам фактический размер документа. Одно из предостережений к этому состоит в том, что полосы прокрутки работают по-разному между браузерами. Например, IE9 всегда будет отображать вертикальную полосу прокрутки, даже если высота документа меньше чем высота обзорного экрана. Safari / Chrome не имеет полос прокрутки в OS X Lion. Chrome на ПК не будет отображать вертикальные полосы прокрутки, если в этом нет необходимости.

Таким образом, вы можете столкнуться с несоответствиями, и полоса прокрутки сдвигает содержимое проблемы. Представьте, что у вас есть абсолютно позиционированный и центрированный элемент. Поскольку CSS вычисляет "центр" относительно размеров документа, а не размеры видового экрана, когда, скажем, Google добавляет полосы прокрутки, ваш контент может немного "подскочить" к слева по мере изменения" центра документов". Поэтому вам может потребоваться написать JS, чтобы компенсировать этот эффект, если он вас беспокоит, или, возможно, кто-то здесь может написать быструю функцию JS для вычисления размеров документа с включенными полосами прокрутки.

Положение и размеры полосы прокрутки

В то время как некоторые методы в JavaScript работают с координатами документа, другие работают с координатами видового экрана, и часто это не то, что вы хотите. Например, если у вас есть верхний край элемента в 20px в координаты документа, и вы прокручиваете страницу вниз на 20 пикселей, верхний край этого элемента будет находиться на 0 пикселей по отношению к координате верхнего видового экрана. Таким образом, чтобы конвертировать между двумя системами, вам сначала нужно узнать, на сколько пикселей пользователь прокрутил документ, а затем добавить это число в окно просмотра для компенсации (смотрите пример ниже).

Я также нашел эти полезно:

Http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Http://www.quirksmode.org/mobile/viewports.html

И вот быстрый кроссбраузерный модуль, который я испортил, чтобы помочь вам:

var dimensions = (function(){

    var dims = {};

    // get screen width/height:
    dims.screenWidth = function() { window.screen.width };
    dims.screenHeight = function() { return window.screen.height };

    // get screen width/height minus chrome:
    dims.availWidth = function() { return window.screen.availWidth };
    dims.availHeight = function() { return window.screen.availHeight };

    // get document width/height (with-out scrollbars):
    if (window.document.compatMode == "CSS1Compat"){ // if IE Standards Mode
        dims.documentWidth = function() { return document.body.offsetWidth };
        dims.documentHeight = function() { return document.body.offsetHeight };
    }
    else {
        dims.documentWidth = function() { return document.documentElement.offsetWidth };
        dims.documentHeight = function() { return document.documentElement.offsetHeight };
    }

    // get viewport width/height (with scrollbars):
    if (window.innerWidth != null) {
        dims.viewportWidth = function () { return window.innerWidth };
        dims.viewportHeight = function () { return window.innerHeight };
    }

        // if IE in Standards Mode
        else if (window.document.compatMode == "CSS1Compat"){
            dims.viewportWidth = function () { 
                return window.document.documentElement.clientWidth
            };
            dims.viewportHeight = function () { 
                return window.document.documentElement.clientHeight
            };
        }

    // get scrollbar offsets:
    if (window.pageXOffset != null) {
        dims.scrollXOffset = function() { return window.pageXOffset };
        dims.scrollYOffset = function() { return window.pageYOffset };
    }

        // if IE in Standards Mode
        else if (window.document.compatMode == "CSS1Compat"){
            dims.scrollXOffset = function() { return document.documentElement.scrollLeft };
            dims.scrollYOffset = function() { return document.documentElement.scrollTop };  
        }

    return dims;
}());

Вы можете, например, сделать console.log(dimensions.viewportWidth()), чтобы получить ширину видового экрана.

Надеюсь, это поможет вам:)