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 pageXOffset property in JavaScript?
The pageXOffset property returns the number of pixels the document has been scrolled horizontally from the left edge of the window. It's a read-only property of the window object used to track horizontal scroll position.
Syntax
let horizontalScroll = window.pageXOffset;
Return Value
Returns a number representing the horizontal scroll position in pixels. Returns 0 if the document hasn't been scrolled horizontally.
Example: Basic Usage
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
height: 800px;
width: 2000px;
padding: 20px;
}
button {
position: fixed;
top: 10px;
left: 10px;
z-index: 100;
}
</style>
</head>
<body>
<button onclick="checkScroll()">Check Horizontal Scroll</button>
<div>
<p>This div is wider than the viewport. Scroll horizontally and click the button.</p>
</div>
<script>
function checkScroll() {
alert("Horizontal scroll: " + window.pageXOffset + " pixels");
}
// Scroll to demonstrate
window.scrollTo(300, 0);
</script>
</body>
</html>
Example: Combining pageXOffset and pageYOffset
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
height: 1500px;
width: 2000px;
padding: 20px;
}
.info {
position: fixed;
top: 10px;
right: 10px;
background: white;
padding: 10px;
border: 2px solid #333;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="info" id="scrollInfo">
X: 0px, Y: 0px
</div>
<div class="container">
<h2>Scroll in any direction</h2>
<p>The scroll position will be displayed in the top-right corner.</p>
</div>
<script>
function updateScrollInfo() {
const info = document.getElementById('scrollInfo');
info.textContent = `X: ${window.pageXOffset}px, Y: ${window.pageYOffset}px`;
}
// Update on scroll
window.addEventListener('scroll', updateScrollInfo);
// Initial update
updateScrollInfo();
</script>
</body>
</html>
Browser Compatibility
| Property | Support | Alternative |
|---|---|---|
pageXOffset |
All modern browsers | document.documentElement.scrollLeft |
pageYOffset |
All modern browsers | document.documentElement.scrollTop |
Key Points
-
pageXOffsettracks horizontal scroll position -
pageYOffsettracks vertical scroll position - Both are read-only properties
- Return values are in pixels
- Often used with scroll event listeners
Conclusion
The pageXOffset property provides an easy way to track horizontal scrolling. Combined with pageYOffset, it gives complete scroll position information for creating scroll-aware web applications.
Updated on: 2026-03-15T23:18:59+05:30
302 Views
Advertisements