在移动设备上滚动但在台式机上滚动时倒计时暂停

Question

I am building a web app that is intended to run on mobile phones and desktop. A part of the app is a quiz. I have a countdown clock at the top of the page that counts down one seconds at the time.

window.setInterval(function () {
    console.log("THIS STOPS WHILE SCROLLING");
}, 1000);

When the user touches the screen and holds on Android and iOS devices, this function pauses and then resumes when scrolling or touching is done/released.

I need the clock to keep updating and counting while the user touches the screen. How do I do that? I am using AngularJS .

Answer 1

You can disable scrolling on touch devices using code like this:

var disableScroll = function (e) {
    if (yourAlarmIsRunning === true) {
        e.preventDefault();
    }
};

document.body.addEventListener('touchstart', disableScroll, false);
document.body.addEventListener('touchmove', disableScroll, false);

Since it sounds like you only want to disable it if your alarm thing is running, use a variable to keep track of whether it's running, and if it is, then disable scrolling.

Answer 2

You can use some "scroll" library, to emulate the native scroll. This way, the timeouts and intervals aren't paused ;)

I had the same problem in the past, and this worked for me.

I don't remember exactly wich library i used, but something like this may work: https://jamesflorentino.github.io/nanoScrollerJS/