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.
Related
I have a simple structure div named scrollContainer with overflow-y:scroll rule and an inner larger div called inner.
In the inner div I have some texts and an input. On the input I have an attribute directive called getPosition applied, which should return on scroll event the exact position of the input relative to the top of scrollContainer.
This is what I need:
Here is the sample angular app: https://codepen.io/neptune01/pen/vapmLQ
As you can see, tried with offsetTop and other dom properties, but I couldn't find anything that would result what I need.
I would recommend using a combination of getBoundingClientRect() and the current scroll position to accomplish this like so:
let outer = document.getElementById('scrollContainer');
let inner = document.getElementById('inner');
let outerTop = outer.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
let innerTop = inner.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
let difference = innerTop - outerTop;
The reason you wouldn't just subtract outer top from inner top in the first place and ignore the scroll position is because on the off chance that you are scrolling while the calculations take place you could throw off the offset, as getBoundingClientRect() only takes into account the distance from the edge of your view to the element, while the scrollY shows the distance from the edge of your view to the top of the document.
I need to grab the height of the window and the scrolling offset in jQuery, but I haven't had any luck finding this in the jQuery docs or Google. I'm 90% certain there's a way to access height and scrollTop for an element (presumably including the window), but I just can't find the specific. I am stuck on code below
var height = $(window).height();
var scrollTop =$(window).scrollTop();
I’m not sure what the jQuery Approved™ way of doing this would be, but in plain JavaScript:
var height = window.innerHeight;
var scrollTop = window.pageYOffset;
You must understand the basic difference between $(window) and $(document).
$(window) refers to the viewport
$(document) refers to the actual html document
So in your case you'd use $(document).scrollTop(); for the scroll distance and depending on needs (actual viewport height or document height) either $(document).height() or $(window).height()
Edit: Check out http://api.jquery.com/height/ and http://api.jquery.com/scrolltop/
I'm not sure if this has been answered before but is there a way to bind the scroll event to the html5 video currentTime element?
Something like:
$(window).bind("scroll", vidProgress)
.load(vidProgress);
function vidProgress() {
$('video').currentTime = **viewport scroll progress**;
};
It depends on how you define "viewport scroll progress". If you mean scroll progress as in the proportion of scrollable height that has been scrolled past, you can simply divide the scrollTop of the viewport by the scrollable height. Scrollable height, in turn, is simply the difference between the document height and the viewport height.
With this ratio in mind, you can simply multiply it by the duration of the video, accessed using .duration property, in order to navigate to the correct timestamp that is to the ratio of the scrollable height of the page.
In my fiddle example, I have set the document height to 500% that of the viewport, and positioned the video fixed relative to the viewport, in order to demonstrate how this works (otherwise the video will scroll out of view).
$(function() {
$(window)
.on('scroll', vidProgress)
.load(vidProgress);
function vidProgress() {
// Get video properties
var $v = $('video'),
duration = $v[0].duration;
// Get window properties
var $w = $(window),
scrollable = $(document).height() - $w.height();
// Do seeking
var scrollRatio = $(document).scrollTop()/scrollable;
if(isNaN(scrollRatio)) scrollRatio = 0;
$v[0].currentTime = scrollRatio*duration;
};
});
View working demo here: http://jsfiddle.net/teddyrised/kr9jmudu/
Note: If the video is extremely huge, it doesn't make sense to listen to the window's load event. Instead, listen to the loadedmetadata event of the video, so you can already start calculating the ratio.
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 :)
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.