Arrow Rotation and Scroll Reset Issue on Mobile Browsers

Question

I am working on a webpage where I have implemented a feature to scroll to the top or bottom of the page with a triangle arrow that rotates based on the scroll direction. The functionality works well on desktop browsers, but I am encountering an issue on mobile browsers.

The code:

// Initial position values
let position_top = 0;
let position_bottom = document.documentElement.scrollHeight; // Use document.documentElement.scrollHeight to get total document height
let window_height;
let destination = 1; // 1 indicates scrolling down, 0 indicates scrolling up
let prevScrollPos = window.scrollY; // Store the previous scroll position
let element_rota = document.getElementById('rotaid'); // Get the HTML element with the ID 'rotaid'

/*
    Function to smoothly scroll to the top or bottom of the page based on the destination variable.
*/
function move_to() {
    window.scroll({
        top: destination === 1 ? position_bottom : position_top,
        behavior: 'smooth'
    });
}

/*
    Function to rotate the arrow based on the scrolling direction.
*/
function tri_points_to(destination) {
    console.log("Arrow points to: " + destination);
    destination === 1 ? rotate_tri_bot() : rotate_tri_top();
}

/*
    Function to add and remove classes for arrow rotation.
*/
function rotate_triangle(removeClass, addClass) {
    element_rota.classList.remove(removeClass);
    element_rota.classList.add(addClass);
}

/*
    Function to rotate the arrow downward.
*/
function rotate_tri_bot() {
    rotate_triangle("pointing_up", "pointing_down");
}

/*
    Function to rotate the arrow upward.
*/
function rotate_tri_top() {
    rotate_triangle("pointing_down", "pointing_up");
}

/*
    Function to update the destination based on scroll position.
*/
function change_destination() {
    if (!window.scrollY) {
        console.log("Arrived at the destination top: " + destination);
        destination = 1;
    }

    if (window.scrollY === position_bottom - window.innerHeight) {
        console.log("Arrived at the destination bottom: " + destination);
        destination = 0;
    }

    console.log("New destination: " + destination);
    tri_points_to(destination);
}

/*
    Function to handle scroll events and update the arrow rotation and destination.
*/
function handleScroll() {
    const currentScrollPos = window.scrollY;

    // Check the scroll direction and update the destination
    if (currentScrollPos > prevScrollPos) {
        console.log("Scrolling down");
        destination = 1;
    } else if (currentScrollPos < prevScrollPos) {
        console.log("Scrolling up");
        destination = 0;
    }

    // Note the last scroll value
    prevScrollPos = currentScrollPos;

    // Make changes to the arrow's rotation and change its scroll destination 
    tri_points_to(destination);
    change_destination();
}

/*
    Function to update the scroll height on window resize.
*/
function update_scroll_height() {
    position_bottom = document.documentElement.scrollHeight;
}

// Debounce function to limit the frequency of function calls
function debounce(func, delay) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), delay);
    };
}

// Debounced scroll event listener
window.addEventListener('scroll', debounce(handleScroll, 100));
// Debounced resize event listener
window.addEventListener('resize', debounce(update_scroll_height, 100));

// Initial call to update scroll height
update_scroll_height();
`

The problem is that when I scroll to the bottom of the page, the arrow doesn't reset its position correctly. It seems like the scroll events or calculations may not be working as expected on mobile devices.

I've tested the page on multiple mobile browsers, and the issue persists. Can anyone provide insights into why the arrow position isn't resetting correctly on mobile browsers? Any suggestions or modifications to the code would be greatly appreciated.

Thank you!

Answer 1

Scroll events don't work on touch devices, for those you have to rely on swipe or touch event listeners.

you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events