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:

This jquery plugin detects the $window scroll position, how do I tell this plugin to use an element's scroll position instead?

I'm using a jQuery plugin called hcsticky it detects a window's scroll position and then applies a position:fixed to an element.
My problem is that I have an position:absolute container that scrolls instead of the window. This means that my plugin doesn't apply the fixed position to my element.
This only happens on tablets as larger dimensions use a different stylesheet and the window itself scrolls.
Right now I have the plugin setup like this:
$('#imageContent').hcSticky({
innerSticker: $('#textContent'),
stickTo: $('#textContent'),
bottomEnd: -60,
top: 60
});
Right now this detects whether the scrollTop has has reached the top of #textContent and will apply fixed to #imageContent for the height of #textContent. None of this is triggered because, I believe, the function is measuring the $window scrollTop and not the #scroller scrollTop.
Am I missing something, is there something in this plugin's options that enables this that I'm missing? here

How do I set scroll top of a web page

I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.

use jQuery('html,body').scrollTop('other things here');

Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)

Auto scoll a page when an image is at the top of the window

Ok I have a page with stacked div's and anchors which use a jquery slide slide down. When the bottom of a stacked div reaches the top of the screen I want the jquery to automatically scroll to the next div, which may be 1000px south.
How can i do this in javascript?
my idea is to put an image the bottom of the div and somehow check the screen to see if the image is in the top half of the monitor which would call a function to scroll to the next anchor..
Is this possible?

var wHeight =$(window).height()/2;
$(window).scroll(function(){
var imgOff = $('#two').offset().top-$(window).scrollTop();
if(imgOff<wHeight){
alert('Kill BILL!');
}
});
havent tried this out but it should work
Edit: this works try it here
http://jsfiddle.net/BG2Cz/
P.S. Be warned it will spam alerts once u pass the middle

Overriding scroll function within only one element

I'm using jquery to provide clickable overlays, I'd like to replace the default Scroll up/down methods with left/right (So when you scroll the page it moves horizontally not vertically. I'm worried about the scroll function still working as intended within the overlays.
Update: If it's not possible to scroll the browser what about a div that has a horizontal scroll bar that on scroll up/down moves left to right (as well as anchors)
My JavaScript experience is somewhat limited, any guidance with this matter would be greatly appreciated
Thanks!

Found an appropriate solution with:
http://plugins.jquery.com/project/ScrollTo
my code:
function shiftScroll(offset) {
console.log('current:' + window.pageXOffset);
console.log('currentY:' + window.pageYOffset);
$(window).scrollTo(window.pageXOffset + offset, window.pageYOffset, {axis:'x'});
}
I still need to disable the vertical scroll bars in the body, while not disabling the vertical scroll bars in elements within the page.