No Login Data Private Local Save

Scroll Position Monitor - Online Live Scroll Top/Left

Debugging Developer Tools live monitor position scroll
42
0
0
0
Scroll Position Monitor
Monitoring
Speed: 0 px/s Idle
scrollTop (Y)
0
pixels
Max: 0 px
scrollLeft (X)
0
pixels
Max: 0 px
Vertical %
0%
scrolled
Horizontal %
0%
scrolled
Vertical Scroll Progress 0%
Horizontal Scroll Progress 0%
Jump to:
Scroll History (last 4s)
4s ago now
Session Stats
Total Scrolled 0 px
Max ScrollTop Reached 0 px
Direction Changes 0
Current Speed 0 px/s
Viewport --
Document --
Demo: Scroll inside this box to see how the monitor tracks window scrolling in real-time on a live page.

šŸ“œ Demo Content ā€” Scroll down inside this box

This is a demonstration area. On a real page, the monitor tracks window.scrollY and window.scrollX globally. Scroll this page up and down to see the values change live.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

šŸ” Tip: Scroll the main page now and watch the numbers update in real-time above!

Frequently Asked Questions
What is scrollTop / scrollY?

scrollTop (or window.scrollY) represents the number of pixels the document has been scrolled vertically from the top. It's the distance between the top edge of the viewport and the top edge of the document. A value of 0 means you're at the very top of the page.

What is scrollLeft / scrollX?

scrollLeft (or window.scrollX) measures horizontal scrolling ā€” how many pixels the document has been scrolled from the left edge. This is less common on responsive websites but can occur on wide tables, code blocks, or fixed-width layouts.

How is scroll percentage calculated?

Scroll percentage = scrollTop / (scrollHeight - clientHeight) Ɨ 100. The denominator represents the maximum scrollable distance. When this value reaches 100%, you've scrolled to the very bottom of the page. If the page fits entirely within the viewport, the percentage is 0% (or NaN, which we display as 0%).

How do I get the scroll position in JavaScript?

The most reliable modern approach: window.scrollY for vertical and window.scrollX for horizontal scroll position. Legacy alternatives include window.pageYOffset and document.documentElement.scrollTop. All major browsers support scrollY/scrollX.

What's the difference between scrollHeight and clientHeight?

scrollHeight is the total height of the document including content not visible in the viewport. clientHeight is the visible height of the viewport (the browser window's content area). Their difference gives the maximum scrollable distance.

How can I detect scroll direction?

Store the previous scrollY value and compare it with the current one. If current > previous, the user is scrolling down. If current < previous, they're scrolling up. This monitor tracks direction in real-time using this exact technique.

What is smooth scrolling and how do I implement it?

Smooth scrolling animates the transition between scroll positions. Use window.scrollTo({ top: value, behavior: 'smooth' }) or CSS scroll-behavior: smooth on the html element. The "Jump to" feature in this tool uses smooth scrolling for a polished experience.

Why monitor scroll position in real-time?

Real-time scroll monitoring is essential for debugging scroll-based animations, implementing lazy loading, triggering events at specific scroll depths, measuring user engagement (how far users scroll), and building features like sticky headers, progress indicators, and infinite scroll.

What are scrollTopMax and maximum scroll values?

The maximum scroll value equals scrollHeight - clientHeight for vertical and scrollWidth - clientWidth for horizontal scrolling. Some browsers support the non-standard scrollTopMax property, but calculating it manually is more reliable across all browsers.

Does horizontal scrolling affect SEO or UX?

Horizontal scrolling is generally discouraged in web design as it creates a poor user experience, especially on mobile devices. It can also negatively impact SEO if content is hidden off-screen. Google's mobile-first indexing penalizes sites that require horizontal scrolling to access content. Always ensure your layout is responsive.

How to listen for scroll events efficiently?

Use window.addEventListener('scroll', callback) but consider performance: scroll events fire rapidly. Debounce or throttle your handler, or use requestAnimationFrame for visual updates. For non-visual work, consider IntersectionObserver as a more performant alternative.

What units does this monitor use?

All scroll position values are displayed in CSS pixels (px). On high-DPI/Retina displays, CSS pixels may differ from device pixels. The monitor reflects what JavaScript reports via window.scrollY and window.scrollX, which always use CSS pixels regardless of device pixel ratio.

šŸ”§ Related Tools