Question

我正在构建一个旨在在手机和桌面上运行的网络应用。该应用程序的一部分是一个测验。我在页面顶部有一个倒计时钟，当时倒计时一秒钟。

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

当用户触摸屏幕并在Android和iOS设备上保留时，此功能会暂停，然后在完成/触发滚动或触摸时恢复。

我需要时钟在用户触摸屏幕时不断更新和计数。我怎么做？我正在使用AngularJS。

Answer 1

您可以使用以下代码禁用触摸设备上的滚动：

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

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

因为听起来你只想在你的闹钟运行时禁用它，所以使用变量来跟踪它是否正在运行，如果是，则禁用滚动。

Answer 2

您可以使用一些“滚动”库来模拟本机滚动。这样，超时和间隔不会暂停;）

我过去遇到过同样的问题，这对我有用。

我不记得我使用过的库，但是这样的东西可能有用：https://jamesflorentino.github.io/nanoScrollerJS/

在移动设备上滚动但不在桌面上的倒计时暂停

2 个答案: