Can't get scroll position within the page. All options returning zero / low values

Question

I don't know what's going on with this code.

$(document).ready(function()
{
    $(window).on('scroll touchstart', function() {
        console.log(
            "$('body').scrollTop="+$('body').scrollTop()
            +", $('html').scrollTop="+$('html').scrollTop()
            +", window.scrollTop= "+$(window).scrollTop()
            +", document.documentElement.scrollTop= "+document.documentElement.scrollTop
            +", window.pageYOffset= "+window.pageYOffset
            +", window.scrollY= "+window.scrollY
            +", document.body.scrollTop= "+document.body.scrollTop
            +", document.scrollingElement.scrollTop="+document.scrollingElement.scrollTop
        );
    });
});

All are always returning zero, until I've scrolled right down the bottom of the page. At that point, they return really low values. Like about 50 pixels or 100 pixels, when I've scrolled down easily 500-1000 pixels.

I thought it was due to this but I removed the height:100% from my CSS for body and html, and I get the same problem. I've also tried adding body { height: auto !important; }

It's not happening on any browsers on my windows PC, (IE, Chrome, Firefox, Edge) but it is happening on all my browsers on Android. (Chrome, Samsung browser, Firefox, DuckDuckGo).

What's going on? Are there alternatives?

Thanks

This is not syntactically valid. After fixing the unmatched braces, the first, third, and fourth options work perfectly fine for me. Could you provide more context, and replace `alert` with `console.log` as well? — BrownieInMotion, May 21 '23 at 20:50
@BrownieInMotion sorry I had a pasting error. Ok, fixed now. I've added more things I've tried too, and they all return the same thing. — Jodes, May 21 '23 at 21:04

Jodes · Answer 1 · 2023-05-22T13:48:04.373

I don't know how to fix the problem, but here's a workaround to tell if it's an issue on a touch device. If the user scrolls with a touch and it's not picked up, it performs recoverFromFailedScrollDetection(). Obviously because a user can flick the screen and it keeps scrolling, you can't keep track of actual scroll amount from touch event details, so can't substitute what we need to know with what we can get from events. So instead we have to perform some desperate alternative.

$(document).ready(function()
{
    var initialY = null;
    $(window).on('touchstart', function(event) {
        initialY = event.touches[0].screenY;
    });
    $(window).on('touchmove', function(event) {
        if (initialY === null) return;
        var distanceY = initialY - event.touches[0].screenY;
        if (distanceY > 30 && !$(window).scrollTop())
            recoverFromFailedScrollDetection();
    });
});

Can't get scroll position within the page. All options returning zero / low values

1 Answers1