Почему позиция абсолютная и фиксированная позиция дает разные показания?

Question

Я собираю простой сценарий jQuery, который позволяет мне компенсировать элемент, основанный на том, как далеко за пределами области просмотра. Другими словами, столкновение объекта (div) с окном просмотра. То, что я собрал до сих пор, прекрасно работает с использованием position: fixed, но отключено на 34 пикселя, если используется position: absolute;, что, я думаю, связано с вертикальной полосой прокрутки браузера * 2. Неважно, так или нет, я не знаю, как чтобы компенсировать это.

Возможно, у кого-то есть идея, как я могу исправить это другое чтение?

я собрал jsfiddle, который можно просмотреть здесь: https://jsfiddle.net/pegues/m1zg5p4c/1/

В jsfiddle, вы можете увидеть в области просмотра «Off-экран X: -133`. Для значения должно быть -150. Если вы измените значение css для .box в строке 13 на фиксированное, вы увидите правильное положение красного блока и снизу в нижней и правой части экрана, а значение Off-screen X будет равно -150.

Возможно, существует какой-то принцип с тем, как фиксированные или абсолютные работы, о которых я пропустил или забыл?

elemCollision($('.box')); 

function elemCollision(el) { 

    // Viewport Width and Height 
    var viewportW = window.innerWidth; 
    var viewportH = window.innerHeight; 

    // Element Width and Height 
    var width = el.innerWidth(); 
    var height = el.innerHeight(); 

    // Element Position: top, right, bottom, left 
    var top = el.offset().top; 
    var left = el.offset().left; 
    var right = (viewportW - left) + viewportW; 
    var bottom = (viewportH - top) + viewportH; 

    // Amount Element is Off Screen 
    var offScreenX = (viewportW - left) - width; 
    var offScreenY = (viewportH - top) - height; 

    // Position Element 100% on Screen 
    var placementX = (viewportW - left) - Math.abs(offScreenX); 
    var placementY = (viewportH - top) - Math.abs(offScreenY); 

    // Assign New X and Y Placement Values 
    $('.box').css({ bottom: placementY, right: placementX }); 

    $('body').append(
    '<div style="padding: 10px; font-size: 0.80em; line-height: 1.25em;">-----' + '<br/>' + 
     'Placement Top: ' + top + '<br/>' + 
    'Placement Right: ' + right + '<br/>' + 
    'Placement Bottom: ' + bottom + '<br/>' + 
    'Placement Left: ' + left + '<br/>' + 
    'Box Width: ' + width + '<br/>' + 
    'Box Height: ' + height + '<br/>' + 
    'Viewport Width: ' + viewportW + '<br/>' + 
    'Viewport Height: ' + viewportH + '<br/>' + 
    'Off-screen X: ' + offScreenX + '<br/>' + 
    'Off-screen Y: ' + offScreenY + '<br/>' + 
    'New Placement X: ' + placementX + '<br/>' + 
    'New Placement Y: ' + placementY + '<br/>' + 
    '-----</div>' 
); 
} 

Answer 1

Вы правы, что это полоса прокрутки (хотя это выглядит невидимым). Если запустить эту функцию (source):

function getScrollBarWidth() { 
    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'), 
     widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth(); 
    $outer.remove(); 
    return 100 - widthWithScroll; 
}; 

Вы увидите ширину полосы прокрутки (в here является jsfiddle где я добавил функцию). Если вы держите positition:absolute на поле и добавьте overflow-y:hidden; в тело, вы увидите, что запуск функции теперь даст вам нулевое исключение, так как полоса прокрутки не имеет ширины, влияющей на тело (она даже на самом деле не существует) ,

Так, чтобы ответить на ваш вопрос, так как Absolute позиционирование по отношению к родителю (body), и body имел скроллбар затрагивающей ширину, вы не получаете результат, который вы ожидали.

Answer 2

Измените ширину и высоту окна от внутренней ширины до ширины и той же высоты.

// Viewport Width and Height 
    var viewportW = window.width; 
    var viewportH = window.height; 

и ваше дно и оставили CSS для 0px