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:

Using Parent Scrollbar instead of Sub Component Scrollbar with Angular Virtual Scroll

Context
I'm using angular virtual scroll to display a long list of elements. My design is very simple and can be seen in the image below.
Current Behaviour
Currently, the virtual scroll has its own scrollbar which operates differently from the parent scroll bar. This makes it very tedious to scroll to the footer. i.e. When you scroll to the end of the list it does not scroll to the footer.
Desired Behaviour
I want the virtual scroll container to use the parent scroll bar instead of its own such that when the end of the list is reached, regular scrolling is resumed.
A Stackblitz can be found here illustrating the undesired behaviour: https://stackblitz.com/angular/aemdyrjmebn

This is default scrolling behavior native to the browser (I tried it on Chrome). For example the same thing will happen with the overflow: scroll example on MDN: after the container has been fully scrolled down, the scrolling of the parent/window will not begin until the mouse is moved. This is also what happens with Angular Virtual Scrolling
If there is another way to achieve what you're looking for you would need to do it when the virtual container has been scrolled to the bottom - and you can get this event with the following code:
#ViewChild(CdkVirtualScrollViewport, {static: false}) virtualScroll: CdkVirtualScrollViewport;
ngAfterViewInit() {
this.virtualScroll.elementScrolled().pipe(
filter(event => {
return this.virtualScroll.measureScrollOffset('bottom') === 0;
}),
tap((event)=> {
// do something here
})
).subscribe()
}

Kendo scrolling listview not working

I am trying to scroll a list view to the top when a button is clicked, however it doesn't seem to be working.
Here is an example...
http://jsbin.com/jofijowa/1/edit
Essentially, I am trying to move the list view like this...
function scrollTop() {
console.log("Hello World"); //debug
var scroller = $("#flat-listview").kendoMobileScroller()
console.log(scroller); //debug
scroller.scrollTop(0);
}
#flat-listview being the id of the ul
Any ideas?
Thanks

The Kendo Mobile Scroller uses scrollTop only when the View has native scrolling enabled. When it isn't - it uses CSS transforms for scrolling instead. If you use the reset method of the scroller, it will scroll to the top regardless of the current scrolling type.

if cursor inside div then display block jquery

Here is a jsfiddle of the problem:
http://jsfiddle.net/MEJgb/
I want it so when you hover over anywhere in the footer the toggledown will become active and will remain active until you move the mouse from the footer.

Your problem is the following line:
jQuery('html,body').animate({
scrollTop: jQuery("#footer_copy_right").offset().top
}, 'slow');
This causes the whole page to move adn thus the item you were hovering over is no longer being hovered over so it triggers your event again and hides your text. When I was testing this was causing the hover content to move back under my mouse and thus trigger again...
I would personally not use hover in this situation and let the user click to expand and then click again to collapse.
If you want to keep using the hover option then you need to decide what the event to trigger the collapse should be. Clearly the current choice (mouse no longer over the arrow) is insufficient.
Often what I will do is attach the hover to a block containing the visible triggering block as well as the contents that are going to be displayed. This way your content won't collapse until you have moved off the newly displayed content.
http://jsfiddle.net/AjHwM/ is an example of such a thing.

Even if I'm not sure what your actual goal is, maybe the document.elementFromPoint() method is what helps you out here.
It is invoked like
if( document.elementFromPoint( event.pageX, event.pageY ) === $('#footer')[0] ) { }
That code, within your hover aka mouseenter / mouseleave handlers, would compare the node which lays under the current absolute mouse cursor X/Y positions against the #footer node.
Ref.: MDN doc, W3C doc

Trigger an event when user clicks on a divs horizontal scrollbar arrow

I have a div with a horizontal scroll.
Is there any way I can detect the click on the horizontal scrolls
arrow using jQuery ?
Note:
Actually I want the scroll to move a fixed no of pixels to the right when the user clicks the right scroll arrow and vice versa.
The event should not be triggered on scroll. It should be only triggered if user explicitly clicks the scrolls arrow.
There are multiple divs having scrollbars, having same class and no ids.
Would prefer to not use any plugins

Here is a demo for what you want
http://jsbin.com/opufow/4/edit
I hope this will help you?

you can use .scroll function of jquery.

Edit 2: Another suggestion is to do something like this depending on your implementation of scrolling areas (see working jsfiddle):
function CustomScrollArrow(elementToScroll) {
var $el = $(elementToScroll);
return $('<a>Click me to scroll</a>').css(/*...*/).click(function(){
$el.scrollLeft($el.scrollLeft()+10);
});
}
$('.ScrollAreaClass').each(function(){
// You could choose to append to your scrolling
// areas or their wrapper classes or whatever...
$('body').append(new CustomScrollArrow(this));
});​
Afterwards it's just a matter of styling your handmade arrows.
Edit 1: I've seen you updated your question, so here's an updated answer with an alternative solution.
You can try to circumvent the problem by using a customized scrollbars implementation, for example jScrollPane by Kelvin Luck or any other, whatever. If the solution offers click events on arrows - then you're set. Otherwise just do a bit of tinkering...
I maintain, however, my point of view that unless you are looking to perform an action before the browser executes the arrow click, I would recommend adding an event handler to the actual result of that click, i.e. the scroll.
Doing this will help to avoid inconsistencies across various implementations of scrolling in browsers; will keep working if scrolling is performed in another manner (i.e. swipe gesture); will still work if there's some javascript code that replaces the default browser implementation of scrollbars.
jQuery offers the .scroll handler to capture scrolling and .scrollLeft to determine the resulting position of the horizontally scrolled content.
Try a working jsfiddle or see the code below:
// Cache the initial scroll position:
var initialLeftScroll = $('#wrapper').scrollLeft();
// Bind event:
$('#wrapper').scroll(function (ev) {
// Get new horizontal scroll offset:
var currentLeftScroll = $('#wrapper').scrollLeft();
// Determine the difference
// (did the user scroll horizontally or just vertically?):
var leftScrollDifference = currentLeftScroll - initialLeftScroll;
// Now we can check
if (leftScrollDifference) {
/* Do something here */
}
// Reset the cache:
initialLeftScroll = currentLeftScroll;
});