Почему при передаче значений (целых чисел) в console.log() выводит дробные?
Начал изучать методы координат, метрик и прокрутки в JS и столкнулся с такой интересной штукой. Покажу сразу на примере:
(.lesson-block {
margin: 0 auto;
max-width: 500px;
height: 300px;
overflow-y: auto;
width: 100%;
background-color: #915d45;
border: 20px solid #82d4ad;
padding: 10px;
font-size: 18px;
line-height: 130%;
})
const metcriksBlock = document.querySelector('.lesson-block');
// Передаю metcriksBlock значение scrollTop
metricksBlock.scrollTop = 50;
const blockScrollTop = metcriksBlock.scrollTop;
console.log('Значение scrollTop для .lesson-block: ' + blockScrollTop);
>>> Значение scrollTop для .lesson-block: 49.599998474121094Вместо целого числа console почему-то выводит дробное. Это кстати не единственный такой случай, когда вешаю событие на кнопку, при клике: scrollBy(0, 50) и в консоль вывожу кол-во прокрученных пикселей сверху, в результат получаю 0, 49.599998474121094, 99.19999694824219 и так далее. Или к примеру результаты getBoundingClientRect():
Знатоки, жду вас.
Программирование+3
Лучший
В данном примере console.log выводит те значения, которые ему передали. То есть, размеры элемента, которые вы получили в коде и выводите на консоль, действительно являются дробными числами.
Это поведение характерно для браузера Chrome и родственных ему браузеров. На него даже заводили баг, но этот баг был закрыт с вердиктом "так и должно быть". Хотя, например, в Firefox такой странности нет.
Дело в том, что тот же getBoundingClientRect() возвращает значения размеров, вычисленные после отрисовки страницы. Эти размеры измеряются в абстрактных пикселях, которые не ставятся в точное соответствие физическим точкам на экране, и действительно могут быть дробными.
Спасибо большое, я понял!