Question

我正在尝试在我的网站上实现某种播放器。如果按'Play'按钮，音乐将开始，页面将平滑向下滚动。但是当您按'Mute'按钮(function(){music.volume=0})时，我不确定为什么页面会再次出现在顶部。 window.scroll()毫不拖延地做任何事情。所以我使用setTimeout函数滚动当前位置的页面。问题是在Opera和IE setTimeout中大约需要10 ms，所以当我点击'Mute'按钮时，我会看到顶部和背面的刻度。在chrome中它只需要2 ms并且没有问题。现在，当我决定创建自己的超时功能时，window.scroll()不再起作用。

这是我的代码：

var isMuted = false;
muteButton.onclick = function() {   ////This function works with big delay.
    if (!isMuted) {
        mainAudio.volume = 0;
        isMuted = true;
    } else {
        mainAudio.volume = bgAudioTrackVolume;
        isMuted = false;
    }
    setTimeout(function() {
        window.scroll(0, offset); /// Works
    }, 0)
};

将setTimeout更改为：

i = 9542155.873; /// I have tried delay time from 1ms - 250ms by changing this value.
while (i > 0.00001) {
    i = i / 1.0001234567;
    if (i < 0.00001) {
        window.scroll(0, offset); /// Does not do anything. Strange! Have tried to change variable with a number.
    }
}

每次检查偏移值时，它在调用滚动功能之前始终可用。我知道我的问题不常见，我真的需要你的帮助。

Answer 1

页面滚动到顶部的原因是您使用的是带有空书签#的链接，该书签代表页面顶部。 scroll方法在没有超时的情况下不起作用的原因是在事件处理程序之后跳转到书签。

不要试图将页面滚动回原来的位置，只需通过从事件处理程序返回false来停止链接的默认操作：

var isMuted = false;
muteButton.onclick = function() {
    if (!isMuted) {
        mainAudio.volume = 0;
        isMuted = true;
    } else {
        mainAudio.volume = bgAudioTrackVolume;
        isMuted = false;
    }
    return false;
};

或者，使用除链接之外的其他元素。

只有setTimeout执行函数。 JS

1 个答案: