HTML DOM scrollLeft Property

HTMLWeb DevelopmentFront 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.

raja
Published on 22-Jul-2019 12:51:33
Advertisements