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
HTML Window pageXOffset Property
The HTML Window pageXOffset property returns the number of pixels the current document has been scrolled horizontally from the upper-left corner of the window. This read-only property is useful for tracking horizontal scroll position and implementing scroll-based functionality.
Syntax
Following is the syntax for the pageXOffset property −
window.pageXOffset
Return Value
The property returns a number representing the horizontal scroll distance in pixels. If the document has not been scrolled horizontally, it returns 0.
Example − Basic Usage
Following example demonstrates how to use the pageXOffset property to track horizontal scrolling −
<!DOCTYPE html>
<html>
<head>
<title>HTML Window pageXOffset Property</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.wide-content {
width: 2000px;
height: 300px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
padding: 20px;
font-size: 18px;
margin: 20px 0;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background: #0056b3;
}
#result {
background: white;
padding: 15px;
border: 2px solid #007bff;
border-radius: 5px;
margin: 20px 0;
font-weight: bold;
}
</style>
</head>
<body>
<h1>HTML Window pageXOffset Property Demo</h1>
<button onclick="showOffset()" class="btn">Show pageXOffset Value</button>
<button onclick="scrollRight()" class="btn">Scroll Right</button>
<button onclick="scrollLeft()" class="btn">Scroll Left</button>
<div id="result">Click "Show pageXOffset Value" to see current horizontal scroll position</div>
<div class="wide-content">
This is a wide content area that extends beyond the viewport width.
Scroll horizontally to see the pageXOffset property in action.
The pageXOffset value will change as you scroll left or right.
</div>
<script>
function showOffset() {
const offset = window.pageXOffset;
document.getElementById('result').innerHTML =
'Current pageXOffset value: ' + offset + 'px';
}
function scrollRight() {
window.scrollBy(100, 0);
showOffset();
}
function scrollLeft() {
window.scrollBy(-100, 0);
showOffset();
}
// Update offset display on scroll
window.addEventListener('scroll', showOffset);
</script>
</body>
</html>
The example creates a wide content area that extends beyond the viewport width. As you scroll horizontally, the pageXOffset value updates automatically −
Current pageXOffset value: 0px (initially) Current pageXOffset value: 100px (after scrolling right) Current pageXOffset value: 0px (after scrolling back left)
Example − Scroll Position Indicator
Following example shows how to create a horizontal scroll position indicator using pageXOffset −
<!DOCTYPE html>
<html>
<head>
<title>Scroll Position Indicator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.scroll-indicator {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: #4CAF50;
transition: width 0.3s;
z-index: 1000;
}
.wide-container {
width: 3000px;
height: 200px;
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
color: white;
padding: 50px;
font-size: 20px;
text-align: center;
}
.info {
background: #fff3cd;
padding: 15px;
border: 1px solid #ffeaa7;
border-radius: 5px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="scroll-indicator" id="indicator"></div>
<h1>Horizontal Scroll Position Indicator</h1>
<div class="info">
<strong>pageXOffset:</strong> <span id="offset">0</span>px
</div>
<div class="wide-container">
Scroll horizontally to see the green indicator bar at the top grow.
The pageXOffset value shows your current horizontal scroll position.
</div>
<script>
function updateIndicator() {
const scrollLeft = window.pageXOffset;
const maxScroll = document.documentElement.scrollWidth - window.innerWidth;
const scrollPercent = (scrollLeft / maxScroll) * 100;
document.getElementById('indicator').style.width = scrollPercent + '%';
document.getElementById('offset').textContent = scrollLeft;
}
window.addEventListener('scroll', updateIndicator);
updateIndicator(); // Initial call
</script>
</body>
</html>
This example creates a green progress bar at the top of the page that grows as you scroll horizontally, showing the current scroll progress.
Browser Compatibility
The pageXOffset property is supported in all modern browsers. However, for better compatibility with older browsers, you can use the alternative approach −
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
This fallback uses document.documentElement.scrollLeft for older Internet Explorer versions that don't support pageXOffset.
Key Points
-
pageXOffsetis a read-only property that returns the horizontal scroll position in pixels. -
The property returns
0if the document has not been scrolled horizontally. -
Use it with scroll event listeners to create dynamic scroll-based effects.
-
The companion property
pageYOffsetprovides vertical scroll position. -
Modern browsers also support
window.scrollXas an alias forpageXOffset.
Conclusion
The window.pageXOffset property is essential for tracking horizontal scroll position in web pages. It enables developers to create scroll-based animations, progress indicators, and responsive navigation elements that react to user scrolling behavior.
194 Views
