Javascript DOM HTML Element scrollLeft Property scroll left and top

Introduction

Scroll the contents of a <div> element TO 50 pixels horizontally and 10 pixels vertically:

Click the button to scroll the contents of div to 50px horizontally and 10px vertically.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from   w  w  w. j av a  2s .c om*/
  height: 250px;
  width: 250px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>
</head>
<body>
<button onclick="myFunction()">Scroll contents of div</button><br><br>

<div id="myDIV">
  <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
</div>

<script>
function myFunction() {
  var elmnt = document.getElementById("myDIV");
  elmnt.scrollLeft = 50;
  elmnt.scrollTop = 10;
}
</script>

</body>
</html>



PreviousNext

Related