JavaScript scrollLeft
last modified April 2, 2025
In this article, we explore the element.scrollLeft property in
JavaScript. This property is essential for controlling and monitoring horizontal
scrolling of elements in web development.
Basic Definition
The scrollLeft property gets or sets the number of pixels that an
element's content is scrolled horizontally. When read, it returns how far the
element's content is scrolled from its left edge.
If the element's content isn't scrolled at all, or if the element can't be
scrolled, scrollLeft is 0. The value is always non-negative and
measured in pixels.
Basic scrollLeft Usage
This example demonstrates how to read the scrollLeft value of a scrollable div.
<!DOCTYPE html>
<html>
<head>
<title>Basic scrollLeft</title>
<style>
#scrollable {
width: 200px;
height: 100px;
overflow-x: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="scrollable">
This is some very long content that requires horizontal scrolling to view completely.
</div>
<button onclick="showScroll()">Show Scroll Position</button>
<script>
function showScroll() {
const div = document.getElementById('scrollable');
alert(`Current scroll position: ${div.scrollLeft}px`);
}
</script>
</body>
</html>
In this basic example, we have a scrollable div with horizontal overflow. The
JavaScript code retrieves the current horizontal scroll position using
scrollLeft when the button is clicked.
This demonstrates the fundamental usage of scrollLeft to monitor
horizontal scrolling. The CSS ensures the div is scrollable with
overflow-x: scroll and white-space: nowrap.
Setting scrollLeft Value
This example shows how to programmatically scroll an element using scrollLeft.
<!DOCTYPE html>
<html>
<head>
<title>Setting scrollLeft</title>
<style>
#container {
width: 300px;
overflow-x: scroll;
}
#content {
width: 1000px;
height: 100px;
background: linear-gradient(to right, red, blue);
}
</style>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
<button onclick="scrollRight()">Scroll Right 100px</button>
<script>
function scrollRight() {
const container = document.getElementById('container');
container.scrollLeft += 100;
}
</script>
</body>
</html>
Here we have a container with horizontally scrollable content. The button
increments the scrollLeft value by 100 pixels each time it's
clicked, creating smooth horizontal scrolling.
This demonstrates how scrollLeft can be both read and written to
control horizontal scrolling position. The gradient background helps visualize
the scrolling effect.
Scroll Events with scrollLeft
This example demonstrates how to track scrollLeft changes with scroll events.
<!DOCTYPE html>
<html>
<head>
<title>Scroll Events</title>
<style>
#scroller {
width: 300px;
height: 150px;
overflow-x: scroll;
}
#long-content {
width: 1000px;
height: 150px;
background-color: #f0f0f0;
}
#position {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="scroller">
<div id="long-content">Scroll horizontally to see the position update</div>
</div>
<div id="position">Scroll position: 0px</div>
<script>
const scroller = document.getElementById('scroller');
const positionDisplay = document.getElementById('position');
scroller.addEventListener('scroll', function() {
positionDisplay.textContent = `Scroll position: ${this.scrollLeft}px`;
});
</script>
</body>
</html>
In this example, we attach a scroll event listener to a scrollable div. Whenever
the user scrolls horizontally, the event handler updates a display with the
current scrollLeft value.
This shows how to monitor horizontal scrolling in real-time. The scroll event fires repeatedly during scrolling, allowing for dynamic position tracking.
Smooth Scrolling Animation
This example creates a smooth horizontal scrolling animation using scrollLeft.
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scrolling</title>
<style>
#gallery {
width: 400px;
overflow-x: hidden;
white-space: nowrap;
border: 1px solid #ccc;
}
.image {
display: inline-block;
width: 400px;
height: 300px;
background-size: cover;
}
</style>
</head>
<body>
<div id="gallery">
<div class="image" style="background-image: url('image1.jpg')"></div>
<div class="image" style="background-image: url('image2.jpg')"></div>
<div class="image" style="background-image: url('image3.jpg')"></div>
</div>
<button onclick="scrollToNext()">Next Image</button>
<script>
function scrollToNext() {
const gallery = document.getElementById('gallery');
const targetScroll = gallery.scrollLeft + 400;
const duration = 500; // milliseconds
const startTime = performance.now();
const startScroll = gallery.scrollLeft;
function animateScroll(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
gallery.scrollLeft = startScroll + (targetScroll - startScroll) * progress;
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}
</script>
</body>
</html>
This example implements smooth horizontal scrolling between images in a gallery.
When clicking the button, it animates the scrollLeft property to
scroll to the next image.
The animation uses requestAnimationFrame for smooth performance.
The performance.now() method provides precise timing for the
animation calculations.
Scroll Snap with scrollLeft
This example combines scrollLeft with CSS Scroll Snap for better user experience.
<!DOCTYPE html>
<html>
<head>
<title>Scroll Snap</title>
<style>
#snap-container {
width: 300px;
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
}
.snap-item {
flex: 0 0 300px;
height: 200px;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: white;
}
#controls {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="snap-container">
<div class="snap-item" style="background: red;">1</div>
<div class="snap-item" style="background: green;">2</div>
<div class="snap-item" style="background: blue;">3</div>
</div>
<div id="controls">
<button onclick="prevItem()">Previous</button>
<button onclick="nextItem()">Next</button>
</div>
<script>
const container = document.getElementById('snap-container');
const itemWidth = 300;
function nextItem() {
container.scrollLeft += itemWidth;
}
function prevItem() {
container.scrollLeft -= itemWidth;
}
</script>
</body>
</html>
This example creates a horizontal scroll container with CSS Scroll Snap. The JavaScript controls scrollLeft to navigate between items while CSS ensures snapping to each item's edge.
The combination of scrollLeft and Scroll Snap provides a polished user experience. The buttons increment or decrement scrollLeft by the exact width of one item, and CSS handles the snapping behavior.
Source
In this article, we have explored the element.scrollLeft property
in JavaScript. This property is crucial for implementing and controlling
horizontal scrolling in web applications.
Author
List all JS DOM tutorials.