​x
 
<!DOCTYPE html>
<html>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}
​
#content {
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>
​
<body>
<h1>Element 对象</h1>
​
<h2>scrollTop 和 scrollLeft 属性</h2>
​
<p>滚动下面的内容可显示滚动的像素数。</p>
​
<div id="myDIV" onscroll="myFunction()">
  <div id="content">滚动我！</div>
</div>
​
<p id="demo"></p>
​
<script>
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "水平：" + x.toFixed() + "<br>垂直：" + y.toFixed();
}
</script>
​
</body>
</html>
​