HTML - DOM Element scrollLeft Property

Quiz

The HTML DOM Element scrollLeft property is used to get (retrieve) and set (update) the horizontal scroll position of a scrollable element.

This property measures the distance in pixels that the content of the element has been scrolled from the left edge of the element.

Syntax

Following is the syntax of the HTML DOM Element scrollLeft (to set the property) −

element.scrollLeft = pixelValue;

Use the following syntax to get the scrollLeft property value −

element.scrollLeft;

Property Value

Following are the key points about the property value that you will assign −

Value	Description
pixelValue	Pixel Value that sets the horizontal scroll position of the element. If the pixel value is negative, it is set to 0. If the element cannot scroll horizontally, the value remains 0. If the pixel value exceeds the maximum allowed, it is set to the maximum allowed scroll position.

Return Value

This property returns an integer value that holds the horizontally scrolled position in pixels.

Example 1: Setting the scrollLeft Property

The following is the basic example of the HTML DOM Element scrollLeft property. −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element scrollLeft</title>
<style>
   #con {
      width: 300px;
      overflow-x: scroll;
      white-space: nowrap;
      border: 1px solid #ccc;
   }
   .box {
      display: inline-block;
      width: 350px;
      height: 200px;
      margin: 30px;
      background-color: Ffb6c1;
      text-align: center; 
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollLeft property</h3>
<p>Scroll left and right using arrows!</p>
<div id="con">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div> 
</div>
<script>
    var co = document.getElementById('con');
    // Set scrollLeft to 200px on load
    co.scrollLeft = 200;
</script>
</body>
</html>

When the page loads, the container will be scrolled by 200 pixels to the right by default.

Example 2: Retrieving the scrollLeft Property Value

Here is another example of the scrollLeft property. This property is used to retrieve the scroll left value of a scroll bar −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element scrollLeft</title>
<style>
    #con {
      width: 300px;
      overflow-x: scroll;
      white-space: nowrap;
      border: 1px solid #ccc;
    }
    .box {
      display: inline-block;
      width: 350px;
      height: 200px;
      margin: 30px;
      background-color: Ffb6c1;
      text-align: center; 
    }
</style>
</head>
<body>
<h3>HTML DOM Element scrollLeft property</h3>
<p>Scroll left and right using arrows!</p>
<div id="con">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div> 
</div>
<p id="res"></p>
<script>
    var co = document.getElementById('con');
    document.getElementById('res').innerHTML = 
    "ScrollLeft value is: " + co.scrollLeft;
</script>
</body>
</html>

The above program displays the scroll left property value.

Example 3: Updating scrollLeft Property Value

In the example below, we use the scrollLeft property to access and update the scroll left property value dynamically −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .scroll-container {
      width: 400px; 
      overflow-x: scroll;
      white-space: nowrap;
      scroll-behavior: smooth;
   }
   .scroll-item {
      display: inline-block;
      width: 200px;
      height: 150px;
      margin-right: 10px;
      background-color: #00fff0;
      transition: width 0.3s, transform 0.3s;
   }
   button{
      padding: 10px;
      margin: 10px 5px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollLeft Property</h3>
<div class="scroll-container" id="sccon">
   <div class="scroll-item">Item 1</div>
   <div class="scroll-item">Item 2</div>
   <div class="scroll-item">Item 3</div>
   <div class="scroll-item">Item 4</div>
   <div class="scroll-item">Item 5</div>
</div> 
<button onclick="left()">Scroll Left (Decrease)</button>
<button onclick="right()">Scroll Right (Increase)</button> 
<script>
   function left() {
      var con = document.getElementById("sccon");
      con.scrollLeft -= 50;  
   }
   
   function right() {
      var con = document.getElementById("sccon");
      con.scrollLeft += 50;  
   }
</script>
</body>
</html>

When the buttons are clicked, the scrollLeft property value will be increased and decreased by 50.

Example 4: Scroll Left with Input

This example allows you to enter a desired scroll value. Based on the entered value, the scrollLeft property of the container will be updated when the button is clicked −

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #container {
      width: 300px;
      overflow-x: scroll;
      white-space: nowrap;
      border: 1px solid #ccc;
    }
    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #f9f0f9;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
<h3>HTML DOM Element scrollLeft Property</h3>
<div id="container">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
</div>
<div>
   <br>
   <label for="scrollAmount">Scroll Left by: </label>
   <input type="number" id="scrollAmount" value="50">
   <button onclick="scrollLeftByAmount()">Scroll</button>
</div>
<script>
   var container = document.getElementById('container'); 
   var scrollAmountInput = document.getElementById('scrollAmount'); 
   function scrollLeftByAmount() { 
      var amount = parseInt(scrollAmountInput.value); 
      if (amount > 50) { container.scrollLeft += amount;        
      } else { 
         container.scrollLeft -= amount; 
      } 
   }
</script>
</body>
</html>

The above program displayed an input field where the user can enter the scrolling value to want to scroll when the button is clicked.

Example 5: Scroll Position Tracker

The example below uses the scrollLeft property to track the real-time scrolling position of the left scroll bar −

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    #con {
      width: 300px;
      overflow-x: scroll;
      white-space: nowrap;
      border: 1px solid black;
    }
    .box {
      display: inline-block;
      width: 100px; 
      margin: 10px;
      background-color: #fff0ff;
      text-align: center;
      line-height: 100px;
    }
</style>
</head>
<body>
<h3>HTML DOM Element scrollLeft property</h3>
<p>scroll to get the real-time pixel value..</p>
<div id="con">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
</div>
<p id="scrI">Scroll Left: 0</p>
<script>
   var ct= document.getElementById('con');
   var scrI = document.getElementById('scrI');
   
   // Update scroll info on scroll
   ct.addEventListener('scroll', function(){
      scrI.textContent = 'Scroll Left: ' + ct.scrollLeft;
   });
</script>
</body>
</html>

When the user scrolls the left scrollbar, the current scroll position will be displayed in pixels.

Supported Browsers

Property
scrollLeft	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page