为什么绝对位置与固定位置给出不同的读数？

Question

我正在编写一个简单的 jQuery 脚本，让我可以根据项目在视口之外的距离来偏移它。换句话说，对象 (div) 与视口的碰撞。到目前为止我放在一起的东西使用 position: fixed 可以完美地工作，但如果使用 position: absolute; 则偏移 34 像素，我认为这是由于浏览器垂直滚动条 * 2 造成的。无论是这种情况还是不是，不知道怎么弥补。

也许有人知道我该如何解决这个不同的阅读问题？

我整理了一个可以在这里查看的 jsfiddle：https://jsfiddle.net/pegues/m1zg5p4c/1/

在 jsfiddle 中，您可以在视图窗格中看到“Off-screen X: -133”。该值应为 -150。如果将第 13 行的 .box 的 css 更改为 fixed，您将看到红色框的位置正确并齐平到屏幕的底部和右侧，并且屏幕外 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

将您的 window 的宽度和高度从 innerWidth 修改为宽度和高度相同。

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

和你的底部和左侧 css 到 0px

Answer 2

你是正确的，它是滚动条（即使它看起来不可见）。如果你运行这个函数 (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; 添加到 body，您可以看到现在运行调用该函数会给您一个空异常，因为滚动条不会没有任何影响 body 的宽度（它甚至不存在）。

所以回答你的问题，因为 Absolute 定位是相对于 parent (body)，并且 body 有滚动条影响宽度，你是没有得到你期望的结果。

为什么绝对位置与固定位置给出不同的读数？

Why is position absolute vs fixed position giving different readings?

css

jquery

collision-detection