Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#div1 {
height: 200px;
width: 300px;
overflow: auto;
}
#myDiv {
width: 250px;
height: 150px;
border: 1px solid red;
}
#div2 {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div id="div1">
<div id="myDiv">Use scrollbar to change the position. </div>
<div id="div2"></div>
</div>
<br />
<button onclick="GetPosition()">Get the location of the item with a red frame!</button>
<div id="demo"></div>
<script type="text/javascript">
function GetPosition() {
let div = document.getElementById("myDiv");
let rect = div.getBoundingClientRect();
x = rect.left;
y = rect.top;
width = rect.right - rect.left;