Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What is the role of scrollX property in JavaScript?
The scrollX property in JavaScript returns the number of pixels the document has been scrolled horizontally from the left edge of the viewport. It's equivalent to the older pageXOffset property and is read-only.
Syntax
let horizontalScroll = window.scrollX;
Return Value
Returns a number representing the horizontal scroll position in pixels. The value is 0 when the document is not scrolled horizontally.
Example: Basic scrollX Usage
<!DOCTYPE html>
<html>
<head>
<style>
.content {
background-color: lightblue;
height: 800px;
width: 2000px;
padding: 20px;
}
.scroll-info {
position: fixed;
top: 10px;
right: 10px;
background: white;
padding: 10px;
border: 1px solid black;
}
button {
position: fixed;
top: 50px;
left: 10px;
}
</style>
</head>
<body>
<div class="scroll-info" id="info">
Horizontal Scroll: 0px
</div>
<button onclick="scrollPage()">Scroll Right</button>
<button onclick="showScroll()" style="top: 90px;">Check Scroll Position</button>
<div class="content">
<h2>Wide Content Area</h2>
<p>This content extends beyond the viewport width. Scroll horizontally to see more.</p>
</div>
<script>
function scrollPage() {
window.scrollBy(200, 0);
updateScrollInfo();
}
function showScroll() {
alert("Current horizontal scroll: " + window.scrollX + "px");
}
function updateScrollInfo() {
document.getElementById('info').textContent =
'Horizontal Scroll: ' + window.scrollX + 'px';
}
// Update scroll info on scroll
window.addEventListener('scroll', updateScrollInfo);
</script>
</body>
</html>
Example: scrollX vs pageXOffset
<!DOCTYPE html>
<html>
<head>
<style>
.wide-content {
width: 3000px;
height: 400px;
background: linear-gradient(to right, red, yellow, green, blue);
padding: 20px;
}
</style>
</head>
<body>
<div class="wide-content">
<h2>Scroll horizontally and click the button</h2>
</div>
<button onclick="compareScrollProperties()" style="position: fixed; top: 10px; left: 10px;">
Compare Properties
</button>
<script>
function compareScrollProperties() {
console.log("scrollX:", window.scrollX);
console.log("pageXOffset:", window.pageXOffset);
console.log("Are they equal?", window.scrollX === window.pageXOffset);
alert(`scrollX: ${window.scrollX}px\npageXOffset: ${window.pageXOffset}px\nEqual: ${window.scrollX === window.pageXOffset}`);
}
</script>
</body>
</html>
Browser Compatibility
| Property | Support | Recommendation |
|---|---|---|
scrollX |
Modern browsers | Preferred for new projects |
pageXOffset |
All browsers (legacy) | Use for older browser support |
Common Use Cases
The scrollX property is commonly used for:
- Creating scroll-based animations
- Implementing sticky navigation that responds to scroll position
- Saving and restoring scroll positions
- Building parallax effects
Conclusion
The scrollX property provides a modern way to get the horizontal scroll position. Use it alongside scrollY for complete scroll position tracking in web applications.
Updated on: 2026-03-15T23:18:59+05:30
637 Views
Advertisements