HTML DOM scrollLeft Property

HTML Web Development Front End Technology

The DOM scrollLeft property returns and modify the value of the element’s content scrolled horizontally in pixels in an HTML document.

Syntax

Following is the syntax −

Returning scrollLeft

element.scrollLeft

Adding scrollLeft

element.scrollLeft = value

Here value is in pixels

Example

Let us see an example of scrollLeft property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      color:#fff;
      background: #ff7f5094;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.8rem;
      height:80px;
      overflow:auto;
      width:150px;
      margin:20px auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
   }
   #myDIV {
      height: 200px;
      width: 200px;
      overflow: auto;
      margin:20px auto;
   }
   #content {
      height: 400px;
      width: 1000px;
      background-color: lightblue;
   }
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop Property Demo</h1>
<div id="myDIV" onscroll="display()">
<div id="content"></div>
</div>
<div class="show"></div>
<script>
   function display() {
      var elmnt = document.getElementById("myDIV");
      var x = elmnt.scrollLeft;
      var y = elmnt.scrollTop;
      document.querySelector(".show").innerHTML = "Top Scroll = " + x + "px Left Scroll = " + y + "px";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Now scroll inside the blue box to get the value of top scroll and left scroll.

AmitDiwan

Updated on: 01-Jul-2020

57 Views

Kickstart Your Career

Get certified by completing the course

Get Started