Почему window.innerWidth go превышает размер моего окна просмотра?

Question

Я пытаюсь .appendChild () элемент в моем окне просмотра без вертикальной / боковой прокрутки в окне моего браузера. Если я установлю значения x и y как window.innerWidth и window.innerHeight, элемент появится за пределами моего окна просмотра. Как это исправить?

Функция для ширины и высоты:

function XY() {
let x = window.innerWidth;
let y = window.innerHeight;
return [x, y];
}

Окно просмотра:

После добавления элементов:

^ Обратите внимание на добавление вертикальной и горизонтальной полос прокрутки.

Answer 1

x и y в вашем примере будут первым пикселем вне окна просмотра, в правом нижнем углу. Помните, что эти значения основаны на 0.

Например, предположим, что innerWidth равно 5, а innerHeight равно 3. У вас будет:

[0, 0]  [1, 0]  [2, 0]  [3, 0]  [4, 0]  [5, 0]
[0, 1]  [1, 1]  [2, 1]  [3, 1]  [4, 1]  [5, 1]
[0, 2]  [1, 2]  [2, 2]  [3, 2]  [4, 2]  [5, 2]

С вашим текущим кодом, [x, y] будет [5, 3], что будет здесь:

[0, 0]  [1, 0]  [2, 0]  [3, 0]  [4, 0]  [5, 0]
[0, 1]  [1, 1]  [2, 1]  [3, 1]  [4, 1]  [5, 1]
[0, 2]  [1, 2]  [2, 2]  [3, 2]  [4, 2]  [5, 2]
                                                [5, 3]

Чтобы получить нижний правый пиксель, вы бы хотели

return [window.innerWidth - 1, window.innerHeight - 1];

-1 означает, что мы ' речь идет об одном пикселе, который составляет 1x1. Конечно, вы должны учитывать ширину и высоту добавляемого элемента. Элемент 10x10 потребует -10 на обоих.

Пример:

setTimeout(() => {
    document.body.removeChild(document.getElementById("msg"));
    const div = document.createElement("div");
    div.className = "box";
    document.body.appendChild(div);
    div.style.left = (window.innerWidth - div.offsetWidth) + "px";
    div.style.top = (window.innerHeight - div.offsetHeight) + "px";
}, 800);

/* Use border-box */
html {
    box-sizing: border-box;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* Full viewport */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Show a grey background */
body {
    background-color: #eee;
}

/* Our box div */
.box {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: blue;
}

<div id="msg">Box will appear in the bottom-right in 800ms...</div>