Проблема с определением <Сколько пикселей до левого края страницы или верха>

184

22 мая 2022, 13:30

Знаю, есть getBoundingClientRect. Эта штука даёт возможность определить расстояние до краёв на странице, относительно опорного тега. Мой случай довольно странный, как я считаю. Проще будет предоставить вам исходник. Я нуб в JS программировании и мой код для восприятия будет элементарным. ссылка на архив в маил диске - https://cloud.mail.ru/public/3D8y/5BLUi9zRP

Вкратце - я не могу определить с помощью getBoundingClientRect расстояние до лева и верху относительно блока, потому что даются совсем не верные значения. Моя страницы не имеет скролла или чего-то ещё, просто статичная страницы прямоугольник. Блоков для определения верха и лева много, но какой бы я не проверял, на всех неверные значения, в моем случае всё ровняется нулю. Более подробно прочитайте в комментариях в коде.

Кода от силы на 30-40 строк и написан он идиотом вроде меня. Когда скачаете, сконцентрируйте внимание на двух JS файлах и CSS файле, в котором лично мои стили. Есть ещё один, но он ресетающий с интернета

Надеюсь это не займёт у вас более 5-ти минут. Заранее благодарю.

var padding = document.getElementById('myPadding') // эта штука нужна для отступа и центрирования основного блока.
//Почему именно так происхожит центрирование? Подробней в другом JS файле
var pole = document.getElementById('myPole')
var points = document.getElementsByClassName('point')
var stop = document.getElementById('stop')
setInterval(updatePole, 100)
function updatePole(argument) { // тут происходит ценртирование серого блока и мелочёвка, что могла бы делаться через CSS
    var LR = document.documentElement.scrollWidth
    var TB = document.documentElement.scrollHeight
    if (TB <= 550 || LR <= 1000) {
        stop.style.display = "block"; return
    } else {
        stop.style.display = "none"
    }
    pole.style.height = Math.round(TB - 50) + "px"; pole.style.width = Math.round(((TB - 50) + (TB * 0.2))) + "px"
    padding.style.width = Math.round((LR - ((TB - 50) + (TB * 0.2)))) / 2 + "px"
    var pointWidth = parseInt(pole.style.width) * 0.0833
    var pointHeight = parseInt(pole.style.height) * 0.1
    for (var i = 0; i < points.length; i++) {
        points[i].style.width = pointWidth + "px"
        points[i].style.height = pointHeight + "px"
    }
}
points[2].style.background = "black"
abvgd = points[2].getBoundingClientRect()
console.log(abvgd.left)

#myPadding, #myPole {display: inline-block;}
#myPadding {background: red; height: 100px;}
#myPole {background: #ffffff; line-height: 0}
#stop {position: absolute; background: black; color: #b3b3b3; width: 100%; height: 100%; top: 0px;
text-align: center; font-size: 30px; z-index: 9999; display: none}
#stop pre {margin-top: 25%; transform: translateY(-60%); font-family: cursive;}
.point {display: inline-block; background: #f5f5f5;}

<div style="height: 25px; background: blue; width: 1000px;"></div>
<div id="stop"><pre>Окно слишком маленькое
может в ширину, может в длину
<span style="color: #7fc7ff">решать</span> тебе, но что бы продолжить
<span style="color: #ffb02e">придётся</span> вернуть как было
потяни за уголок окна <span style="color: #e9edf5">или</span> разверни <br>
Если это окно вылезло сразу после загрузки
сделай окно больше и обнови страницу
иначе игра на каком-то моменте полетит в <span style="color: #ffc2cc">тартарары</span>
будь <span style="color: #ffff66">осторожней</span>, сохранений тут попросту нету
ведь это обычная игра на <span style="color: #a358e8">html & css & js</span>
</pre></div>
<div id="myPadding"></div
><div id="myPole">
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    <div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div
    ><div class="point"></div> <br>
    
    
</div>