In my application, I want to determine the current scroll position, so I have been using this to do so (source: https://www.codegrepper.com/code-examples/javascript/get+current+scroll+position+javascript)
window.pageYOffset || document.documentElement.scrollTop
Problem: When I console.log this, it only returns 0 when the page is not positioned and the top.
Question: Is there an alternative way to get the current scroll position?
Try window.scrollY.
The read-only scrollY property of the Window interface returns the
number of pixels that the document is currently scrolled vertically.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
recently i had the same problem. So in order to get the position as a percentage I end up do the following
window.addEventListener("scroll", function() {
const maxHeight = document.body.scrollHeight - window.innerHeight;
console.log((window.pageYOffset * 100) / maxHeight);
});
We subtract window.innerHeight from document.body.scrollHeight besause window.pageYOffset represents the top of the viewport. So in order for window.pageYOffset to match document.body.scrollHeight we do the above subtraction.
PS.: The above returns a float number. you can use parseInt(...) to convert it to integer if you'd like.
I am working on react project. when we make the screen size decrease from large to tiny, a scroll bar is appearing in the browser and as a result my testcases are failing.I wanted to know is there any way we can find whether a scroll bar is displayed in the browser for all types of screen sizes. Also is there any way to get the size of the scroll bar being displayed in the browser?
You can compare the height of your content with the height of the window.
So if (document.body.offsetHeight > window.innerHeight) then the scrollbar would be visible.
UPD:
Regarding scrollbar's sizes. Its width is just a difference between window.innerWidth and document.body.offsetWidth, and its height is equal to window.innerHeight.
So summing up:
let scrollbarSize = {
heigth: window.innerHeight,
width: window.innerWidth - document.body.offsetWidth
}
I would have preferred a comment but I do not have access to that yet.
I am assuming you are talking about height here if not please apply the same solutionwhere appropriate.
To know whether your browser is displaying the vertical scrollbar. Compare the height of the document and the screen height.
Method for the calculation of document height would usually vary across browsers in this case. Use something like this:
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
To calculate your window height use:
const windowHeight = documentElement.clientHeight
If your scrollHeight is greater than the windowHeight then you can be most certain that the vertical scrollbar is present.
Therefore it would be easy to detect
In this sandbox I have tested two posible solutions. First approach (ScrollableComponent and hook useIsScrollable) is based on trying to scroll with element. If it does something then you know that it has scrollbar. The second aproach is based on measuring (ScrollableComponentA and hook useIsScrollableA). Measure wrapper element and inner element and compare its height and width.
How can I get the browser scrollbar height? Does JS have a built-in function for this case?
Somebody please help me out of this.
There isn't a built-in method for this. However, the scrollbar's height is supposed to give an indication of how much of the available content fits within the available viewport. Going by that, we can determine it like:
var sbHeight = window.innerHeight * (window.innerHeight / document.body.offsetHeight);
Where window.innerHeight / document.body.offsetHeight is the percentage of content visible currently. We multiple that with the available viewport height to get the approximate scrollbar height.
Note: Different browsers may add/reduce some pixels to/from the scrolbar height.
'window.pageYOffset'
returns the current height of the scrollbar concerning the full height of the document.
A simple example of usage is like
alert('Current scroll from the top: ' + window.pageYOffset)
Does this help?
this.document.body.scrollHeight
What is the difference between screenX/Y, clientX/Y and pageX/Y?
Also for iPad Safari, are the calculations similar as on desktop—OR there is some difference because of viewport?
It would be great if you could point me to an example.
Here's a picture explaining the difference between pageY and clientY and screenY.
Same for pageX and clientX and screenX, respectively.
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
while clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.
screenX/Y are relative to the physical screen.
See Demo
or try this snippet:
document.addEventListener('DOMContentLoaded', _ => {
const info = document.getElementById('info');
const updateInfo = event => {
const { clientX, clientY, pageX, pageY } = event;
info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br /> pageX: ${pageX} pageY: ${pageY}`;
};
document.addEventListener('mouseover', updateInfo);
document.addEventListener('mousemove', updateInfo);
});
body {
border: 1px solid red;
min-height: 10000px;
margin: 10px;
}
#info {
border: 1px solid blue;
position: fixed;
top: 80px;
left: 40px;
}
<h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3>
<div id="info"></div>
Note: You'll probably never need screenX/Y
In JavaScript:
pageX, pageY, screenX, screenY, clientX, and clientY returns a number which indicates the number of logical “CSS pixels” an event point is from the reference point. The event point is where the user clicked and the reference point is a point in the upper left. These properties return the horizontal and vertical distance of the event point from that reference point.
pageX and pageY:
Relative to the top left of the fully rendered content area in the browser. This reference point is below the URL bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.
screenX and screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.
clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.
For a visual on which browsers support which properties:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
<script>
function showCoordinates(event){
var x = event.clientX;
var y = event.clientY;
alert(`X coordinates: ${x}, Y coordinates: ${y}`);
}
</script>
<p onmousedown="showCoordinates(event)">
Click this paragraph, and an alert box will show the x
and y coordinates of the mouse relative to the viewport
</p>
pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
clientX/Y gives the coordinates relative to the viewport in CSS pixels.
screenX/Y gives the coordinates relative to the screen in device pixels.
Regarding your last question if calculations are similar on desktop and mobile browsers... For a better understanding - on mobile browsers - we need to differentiate two new concept: the layout viewport and visual viewport. The visual viewport is the part of the page that's currently shown onscreen. The layout viewport is synonym for a full page rendered on a desktop browser (with all the elements that are not visible on the current viewport).
On mobile browsers the pageX and pageY are still relative to the page in CSS pixels so you can obtain the mouse coordinates relative to the document page. On the other hand clientX and clientY define the mouse coordinates in relation to the visual viewport.
There is another stackoverflow thread here regarding the differences between the visual viewport and layout viewport : Difference between visual viewport and layout viewport?
Another good resource: http://www.quirksmode.org/mobile/viewports2.html
I don't like and understand things, which can be explained visually, by words.
What helped me was to add an event directly to this page and click around for myself! Open up your console in developer tools/Firebug etc and paste this:
document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY)
}, false);
Click anywhere
With this snippet, you can track your click position as you scroll, move the browser window, etc.
Notice that pageX/Y and clientX/Y are the same when you're scrolled all the way to the top!
The difference between those will depend largely on what browser you are currently referring to. Each one implements these properties differently, or not at all. Quirksmode has great documentation regarding browser differences in regards to W3C standards like the DOM and JavaScript Events.
Comparison with offsetX/Y
Other interesting properties are offsetX/Y (offset between the mouse and the border of the clicked element/node). Here's a fuller picture:
Source
clientX/Y refers to relative screen coordinates, for instance if your web-page is long enough then clientX/Y gives clicked point's coordinates location in terms of its actual pixel position while ScreenX/Y gives the ordinates in reference to start of page.
My problem is I need to get the position of the viewport relative to the extent of the entire document. I am only concerned with Firefox.
My issue is that everything I have read says that:
viewport height is window.innerHeight
scroll position is window.pageYOffset
document total height is document.height
So, I would expect that if I scrolled to the bottom of a page that
window.innerHeight + window.pageYOffset == document.height
But it doesn't! Can someone please explain to me why this is?
When scrolling all the way to the bottom, this thould return true
window.innerHeight + window.pageYOffset == document.documentElement.scrollHeight
Document.height can be misleading because it is sometimes set to 100% in the CSS, which messes it up.