When I open a page, the window offset would be 0 but when i scroll through the page, the offset of the window would increase correspondingly? How can I find the window's offset at any particular point of my web page?
You can get the scroll offset of the window by using window.scrollX & window.scrollY. See the MDN article on scrollY for more information.
window.scrollY; // the current vertical scroll offset of the window
Just thought I would provide the non-jQuery version.
I don't know if I get the question, but for getting scroll offset use:
var scrollOffset = $(window).scrollTop();
The .offset() method is undefined for window object or window element therefore you
should use the .scrollTop() method to solve your issue :)
Related
What is the difference between scrollY and scrollTop
What is difference between scrollX and scrollLeft
window.addEventListener('scroll', ()=>{
console.log(document.querySelector('html[lang="en"]').scrollTop) //Same Result
console.log(window.scrollY)
})
scrollY/X - (based on window) The read-only scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically. You can get the number of pixels the document is scrolled horizontally from the scrollX property.
scrollTop/Left - (based on element) The scrollLeft and scrollTop properties return the number of pixels that the element’s content is scrolled from its left and top edges.
The first uses the window object while the later uses the DOM element.
Mozilla -> NOTE: When scrollTop is used on the root element (the <html> element), the scrollY of the window is returned. This is a special case of scrollTop.
So in your instance, it seems there is no difference when used on the root html element.
ScrollTop is basically can be get and set, where as scrollY of window's only can be get. ScrollTop is Element's property where as ScrollY is of Window's property.
Inside the iframe scope, this works in other browsers:
$(parent.document.documentElement).scrollTop()
In Chrome it returns zero (always). Anyone knows the catch?
In backstage: I need to center modal dialog on screen (fixed position), but I cannot set correct margin top without parent window scrollTop.
In Chrome, document.documentElement.scrollTop is always 0. The actual scroll value is in document.body. Discussed here: https://code.google.com/p/chromium/issues/detail?id=157855
You should use:
var parentScrollTop = $(parent.document.documentElement).scrollTop() || $(parent.document.body).scrollTop();
I am trying to position an element using offset() but I'm not sure what is going on:
This is default offset position:
element.offset().top
770
element.offset().left
1822.796875
Then I try setting it manually
element.offset({top: 674, left: 1722 })
And the output:
element.offset().top
-1341
element.offset().left
1722
Top position is -1341 ? and then I tried setting just top property:
element.offset({top:674})
element.offset().top
674
and this works ? What is going on, why I can't set both properties at the same time?
UPDATE: I just figured that this might be important: there is also iframe element on the page that has a scrollbar. So everything with offfset work fine, until I scroll down the window of the iframe element. But after scrolling down and then calling offset() it works.
Since there is no shared fiddle, I'm assuming your scenario.
Assuming your element is hidden and you are setting its offset and then making it as visible. in this case your offset settings will not work.
Try to follow these steps.
Make that element visible. (maybe by using element.show())
Set the offset now.
I've been having trouble calculating this on page load. It should only take one line but I can't seem to get it.
could you elaborate on what the "distance of window to document" means? if you are looking for screen height/width:
window.screen.height
window.screen.width
or
window.screen.availHeight
window.screen.availWidth
for vertical scroll position use:
window.pageYOffset
window.scrollY
I'm pretty sure they are equivalent i.e.
window.pageYOffset == window.scrollY; // always true
DSOC (document scroll offset coordinates) can be found with window.pageXOffset and window.pageYOffset. In your case, you want window.pageYOffset.
More details here:
http://www.javascriptkit.com/javatutors/static2.shtml
I realize that this is an old question, but I had the same problem and sought out a way to fix it. It appears that window.scrollY is not set directly on page load. However, if you do the following, it will register the correct value:
window.setTimeout(function() { console.log(window.scrollY); }, 10);
I've determined that the extra 10ms allows for the document to load and for it to set the window.scrollY value.
I'd like to know the x/y offset of the how far the user has "scrolled" within the viewport in mobile safari on the iphone.
Put another way, if I (through javascript) reloaded the current page, I'd like to find the values I'd need to pass into window.scrollTo(...) in order to reposition the document/viewport as it is currently.
window.pageXOffset always reports 0
jquery's $('body').scrollTop() always reports 0
events have a pageX, but this won't account for the scrolling of the page that happens after you release your finger if your gesture was to "flick" the page up/down. Namely, it'll give me a point when the finger leaves the screen, but that doesn't always match where the page will be after it's finished scrolling.
Any pointers?
window.pageYOffset should give you the current scroll offset. There's window.pageXOffset if you need it too.
I had the same problem... this did the trick:
var scrollX = window.pageXOffset; var scrollY = window.pageYOffset;
Got it from this question: Get current position of the viewport in Mobile (iPhone) Safari
This will indeed work:
var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
If you are viewing content in an iFrame (which is common in WebViews for instance), then you will need to add parent:
var scrollX = parent.window.pageXOffset;
Also note that these values are not writeable. So to change the scroll position, you will need to use window.scrollTo method:
var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
window.scrollTo(scrollX -100, scrollY -100);
Have you tried the pure js way?
document.body.scrollTop
Here is a simple code to find if the device is iphone and also to change the scroll position to specific position based on some action. I had an issue with iphone only when I click and open an image as a popup, because vertical scroll goes down than where I wanted to be. So I wrote this code and it solved the issue.
if((navigator.userAgent.match(/iPhone|iPad|iPod/i))){
('#tutorial-landlord').click(function(){
window.scroll(100, 1500); // x, y (horizontal, vertical position)
});
}
To find the scroll position. Just go to console in chrome and write
window.scrollY for vertical and see how the position changes so note that number and give it in place of x and y
I had the same issue on iPad. Just desactivate the console. The viewport height changes when the console is open in Safari.
If for whatever reason pageXOffset and pageYOffset fail, the solution is straightforward, but rather silly:
// force an element to top left of the page
var topLeftMarker = document.createElement("span");
topLeftMarker.style.position = "absolute";
topLeftMarker.style.left = "0";
topLeftMarker.style.top = "0";
document.body.appendChild(topLeftMarker)
function scrollOffset() {
// getBoundingClientRect() returns the rectangle of the element in viewport space,
// which *is* scrollLeft and scrollTop
const rect = topLeftMarker.getBoundingClientRect();
return { x: rect.left, y: rect.top }
}