🔴 Red Square Coordinates
getBoundingClientRect().left:
-
px
offsetLeft:
-
px
Absolute position:
-
🔵 Blue Square Coordinates
getBoundingClientRect().left:
-
px
offsetLeft:
-
px
Relative to container:
-
📦 Scrollable Container
getBoundingClientRect().left:
-
px
scrollLeft:
-
px
scrollWidth:
-
px
clientWidth:
-
px
🖼️ Viewport Info
scrollWidth:
-
px
scrollLeft:
-
px
Width:
-
px
Available width:
-
px
🎯 Mouse Position
clientX:
-
px
pageX:
-
px
screenX:
-
px
Scroll Status:
Document:
Not centered
Container:
Not centered
Target Positions:
Doc center: 5000px - 50vw =
-
px
Container center: 2000px - 100px =
1900
px
Setup Instructions:
1. Scroll document to middle
2. Scroll blue container to middle
3. Observe coordinate changes
Auto Setup
RED
BLUE