offset vs getBoundingClientRect

Benchmark created on August 7, 2023

Preparation HTML

<div id="parent">
	<div id="child" style="margin-left: -5px;">Text</div>
</div>

Setup

const parent = document.getElementById('parent');
const child = document.getElementById('child');

function boundInView() {
	const {left: parentLeft, right: parentRight} = parent.getBoundingClientRect();
	const {left, right} = child.getBoundingClientRect();

	return parentLeft <= left && parentRight >= right;
}

function offsetInView() {
	const {scrollLeft: parentLeft, offsetWidth: parentWidth} = parent;
	const {offsetLeft: childLeft, offsetWidth: childWidth} = child;

	return childLeft >= parentLeft && childLeft + childWidth <= parentLeft + parentWidth;
}

Test runner

boundInView();

offsetInView();

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on August 7, 2023