HTML Element scrollLeft Property: Controlling Horizontal Scroll

The scrollLeft property of an HTML element is a read-write property that specifies the number of pixels an element’s content is scrolled horizontally. It is useful for getting or setting the horizontal position of the scrollbar.

What is the scrollLeft Property?

The scrollLeft property allows you to programmatically control the horizontal scroll position of an element. This is particularly useful for elements with overflow: auto or overflow: scroll, where the content exceeds the element’s visible area.

Purpose of the scrollLeft Property

The primary purposes of the scrollLeft property are to:

• Get the current horizontal scroll position of an element.
• Set the horizontal scroll position of an element.
• Create custom scrolling behaviors and effects.
• Programmatically scroll elements to specific horizontal positions.

Syntax

The syntax for getting and setting the scrollLeft property is as follows:

Getting the scrollLeft Value

let horizontalScroll = element.scrollLeft;

Setting the scrollLeft Value

element.scrollLeft = pixelValue;

• element: The HTML element whose horizontal scroll position you want to get or set.
• horizontalScroll: A variable that will store the current horizontal scroll position (in pixels).
• pixelValue: The number of pixels to scroll the element horizontally.

Important Notes 📝

• The scrollLeft property is measured in pixels.
• Setting scrollLeft to a value less than 0 sets it to 0.
• If the element’s content is not scrollable horizontally, scrollLeft will return 0.
• For right-to-left (RTL) scripts, scrollLeft is 0 when the scrollbar is at its rightmost position.

Examples

Let’s explore some examples of how to use the scrollLeft property in different scenarios.

Example 1: Getting the Current Horizontal Scroll Position

In this example, we’ll retrieve the current horizontal scroll position of a div element with overflow: auto.

<div
  id="scrollableDiv1"
  style="width: 200px; height: 100px; overflow: auto; border: 1px solid black; white-space: nowrap;"
>
  This is some scrollable content. This content is wider than the div, so a
  horizontal scrollbar will appear.
</div>
<button id="getScrollButton1">Get Scroll Position</button>
<p id="scrollPosition1"></p>

<script>
  const scrollableDiv1 = document.getElementById("scrollableDiv1");
  const getScrollButton1 = document.getElementById("getScrollButton1");
  const scrollPosition1 = document.getElementById("scrollPosition1");

  getScrollButton1.addEventListener("click", function () {
    const currentScroll = scrollableDiv1.scrollLeft;
    scrollPosition1.textContent =
      "Current horizontal scroll position: " + currentScroll + " pixels";
  });
</script>

In this example:

• We have a div with overflow: auto that allows horizontal scrolling.
• A button is used to trigger the retrieval of the current scroll position.
• The scrollLeft property is accessed to get the current horizontal scroll position.
• The scroll position is displayed in a paragraph element.

Example 2: Setting the Horizontal Scroll Position

Here, we’ll programmatically set the horizontal scroll position of a div element.

<div
  id="scrollableDiv2"
  style="width: 200px; height: 100px; overflow: auto; border: 1px solid black; white-space: nowrap;"
>
  This is some scrollable content. This content is wider than the div, so a
  horizontal scrollbar will appear.
</div>
<button id="setScrollButton2">Scroll to 50px</button>

<script>
  const scrollableDiv2 = document.getElementById("scrollableDiv2");
  const setScrollButton2 = document.getElementById("setScrollButton2");

  setScrollButton2.addEventListener("click", function () {
    scrollableDiv2.scrollLeft = 50;
  });
</script>

In this example:

• Clicking the button sets the scrollLeft property to 50, causing the div to scroll horizontally by 50 pixels.

Example 3: Creating a “Scroll to End” Button

This example demonstrates how to create a button that scrolls an element to its horizontal end.

<div
  id="scrollableDiv3"
  style="width: 200px; height: 100px; overflow: auto; border: 1px solid black; white-space: nowrap;"
>
  This is some scrollable content. This content is wider than the div, so a
  horizontal scrollbar will appear.
</div>
<button id="scrollToEndButton3">Scroll to End</button>

<script>
  const scrollableDiv3 = document.getElementById("scrollableDiv3");
  const scrollToEndButton3 = document.getElementById("scrollToEndButton3");

  scrollToEndButton3.addEventListener("click", function () {
    scrollableDiv3.scrollLeft = scrollableDiv3.scrollWidth - scrollableDiv3.clientWidth;
  });
</script>

In this example:

• scrollWidth is the total width of the scrollable content.
• clientWidth is the visible width of the element.
• Setting scrollLeft to scrollWidth - clientWidth scrolls the element to its horizontal end.

Example 4: Smooth Scrolling Animation

This example shows how to create a smooth scrolling animation using requestAnimationFrame.

<div
  id="scrollableDiv4"
  style="width: 200px; height: 100px; overflow: auto; border: 1px solid black; white-space: nowrap;"
>
  This is some scrollable content. This content is wider than the div, so a
  horizontal scrollbar will appear.
</div>
<button id="scrollLeftButton4">Scroll Left</button>
<button id="scrollRightButton4">Scroll Right</button>

<script>
  const scrollableDiv4 = document.getElementById("scrollableDiv4");
  const scrollLeftButton4 = document.getElementById("scrollLeftButton4");
  const scrollRightButton4 = document.getElementById("scrollRightButton4");

  function smoothScroll(element, target, duration) {
    let start = element.scrollLeft;
    let change = target - start;
    let startTime = null;

    function animation(currentTime) {
      if (startTime === null) startTime = currentTime;
      let timeElapsed = currentTime - startTime;
      let run = ease(timeElapsed, start, change, duration);
      element.scrollLeft = run;
      if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    // Easing function (adjust for different easing effects)
    function ease(t, b, c, d) {
      t /= d / 2;
      if (t < 1) return (c / 2) * t * t + b;
      t--;
      return (-c / 2) * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
  }

  scrollLeftButton4.addEventListener("click", function () {
    smoothScroll(scrollableDiv4, 0, 500); // Scroll to start over 0.5 seconds
  });

  scrollRightButton4.addEventListener("click", function () {
    smoothScroll(
      scrollableDiv4,
      scrollableDiv4.scrollWidth - scrollableDiv4.clientWidth,
      500
    ); // Scroll to end over 0.5 seconds
  });
</script>

In this example:

• The smoothScroll function animates the scrollLeft property over a specified duration.
• An easing function is used to create a smooth start and end to the animation.
• The requestAnimationFrame method is used for efficient animation updates.

Browser Support

The scrollLeft property is widely supported across all major browsers:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Practical Tips and Considerations 💡

• Always ensure that the element is scrollable (i.e., overflow is set to auto or scroll).
• Use scrollWidth and clientWidth to calculate scroll distances accurately.
• Consider using smooth scrolling animations for a better user experience.
• Be mindful of RTL scripts when working with scrollLeft.

Conclusion

The scrollLeft property is a valuable tool for controlling the horizontal scroll position of HTML elements. By understanding its syntax, behavior, and practical applications, you can create custom scrolling effects, programmatically scroll elements to specific positions, and enhance the user experience of your web pages. Whether you’re building image galleries, implementing custom navigation, or creating interactive data visualizations, the scrollLeft property empowers you to take control of horizontal scrolling in your web applications.