We Keep Coding

How to get window.scrollTop, ScrollY or any other distance value when using css scroll snap

I am using css scroll snap to scroll through that are 100vh in height. The scroll snap works beautifully.
That said I need to determine how far the site visitor has scrolled for a few different reasons.
I have tried:
let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);
I have also tried window.scrollTop, wrapper.scrollTop and more.
Here is a Codepen of what I am seeing
How can I know the distance scrolled while using 100vh sections and css scroll-snap
TIA

Based on your shared code, the reason why window.onscroll does not work as expected is because neither window nor document.body are overflowing vertically. Only the element that is overflowing will fire the scroll event, and in this case it is actually the element that matches the .box-wrapper selector.
Therefore if you listen to the scroll event on that element, then you should be able to retrieve its vertical scroll position using event.currentTarget.scrollTop:
document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
console.log(e.currentTarget.scrollTop);
});
See proof-of-concept example:

pageY of scrolled element from mouseenter event?

I have a long, scrollable list in an absolutely positioned container in the middle of my page (I do know how far the container is offset from the top of the screen, and the overflow is hidden on all the key elements). Each li in the list has a mouseover event. The events I see have a pageY in it, but that's the mouse position, and thus varies if I enter the li from above vs below. I need a constant value to position something alongside.
I looked in the srcElement property but the offsetTop within that is several 1000s, which means it is not based on the viewable content but the scrolled content.
How can I get a constant value of a scrolled div relative to the window as whole?
Note I canNOT easily run other DOM requests.

You can use the offsetTop you mentioned and substract the current scrollYOffset which you can get using window.pageYOffset.
var y = srcElement.offsetTop - window.pageYOffset;

How can I identify the view div section I have scrolled to?

I have a website with 4 divs that all have heights of 100vh that fill the entire view height and view width. But I can't seem to figure out the section of the div I have navigated to. Is there a way I can use
$(this).scrollTop()
to find out the view or div I am currently viewing? I know this question is quite confusing but if you understand what I am getting at, I truly need your help.

Basically, in your case, you have to know how much have you scrolled the page.
var scrolledY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
After that, as long as your divs have height of 100vh it is the same as window.innerHeight. Therefore, you can calculate the index of div you scrolled to:
var divIdx = Math.floor(scrolledY / vh);
Now, all together: http://jsbin.com/qepodojoqa/edit?html,css,js,console,output

You need to bind an event to scroll and check if you scrolled past a div's top offset.
$(document).scrollTop()
gives you your current top scroll, and
element.offsetTop
gives you the div's offset from the top (i.e, the distance between its top and the top of its parent node, body in this case).
Be aware that there are other ways to detect the top scroll, depending on your needs.

Scroll up a certain percent

I'm wondering if there is any easy way using jquery or javascript to read the current percent that the user is scrolled down a page, and then scroll the user up that percent?
The purpose of this would be:
Var scrollPercent = Read Scroll %
Resize div that effects vertical height of page
Scroll up ScrollPercent

You can use element.scrollTop which will give the vertical offset that has been scrolled.
If your scrolling the body then element can be the document.body otherwise the relative element
Use element.offsetHeight & compare with it if you need percentages.
Another avialable option is
window.scrollY
Once you have this scroll value you can use jquery animation to scroll up to the previous location

jquery: Update element offset top on window resize

Hope this isn't a duplicate question as I've been searching for some time for this issue and haven't found a clean solution yet. Maybe I'm just not searching correctly.
I have a navbar which has its position set to fixed trough javascript when it reaches the top of the viewport. I'm using jquery 1.11.3 to get offset().top of the element, however this value doesn't seem to update itself when the vertical height of the viewport changes.
For example, on an Android tablet with Chrome the address bar disappears, the 'resize' event is triggered but the offset().top of the element remains the same causing my navbar to remain static although it was scrolled past the top of the viewport and should be now fixed. I have also used a timeout to read the new value on resize but to no avail.
Is there some way to ask jquery to reconsider the viewport size so that I don't update my internal offset based on the new values? Or maybe this isn't the way to go?

I encounter the same problem as you. On window resize, my element offset value was not change. In my case, my element was in fixed position. Maybe yours too? But if I scroll the page, the element offset changed. So In my case, I just put a fixed offset value to be use for my element.

Try implement this code in your window resize event
elementTop = $('#element').offset().top;
windowTop = $(window).scrollTop();
if( elementTop - windowTop < 0) {
// write your set fixed position code here
}