0

我正在尝试在 GreaseMonkey 中制作一个玩具脚本，当我单击一个按钮时，它会导致我的屏幕反复跳到屏幕顶部，并在我再次单击该按钮时停止跳动。

这是我的代码：

var perpetualScroll = function () {
    var scrolling = false;

    var scroll = function () {
        if (scrolling) {
            window.scrollTo(0, 0);
        }
    };

    var scrollDiv = document.createElement("div");
    scrollDiv.id = "topScroll0x2a";
    scrollDiv.innerHTML = '<a class="topScroll" onclick="scrolling = !scrolling;" style="display:block; position:fixed; bottom: 1em; right: 1em; color:#fff; background-color:#000; padding:.5em;" href="#">Start scroll</a>';
    document.body.appendChild(scrollDiv);

    var intervalId = window.setInterval(scroll, 50);
};

perpetualScroll();

当我单击脚本创建的下角的按钮时，它会跳到屏幕顶部，但不会继续永远这样做。

我对 Javascript 和 GreaseMonkey 真的很陌生，所以我不太确定问题出在哪里。我怀疑这可能是由于链接的 onclick 部分中的问题，但如果是这样，我似乎无法弄清楚。

4

1 回答 1

1

这样做onclick不会像你期望的那样工作。你innerHTML只是一个字符串，所以 JS 不知道它在你的perpetualScroll函数范围内。

onclick作为字符串的处理程序在全局范围内进行评估，因此您所拥有的等同于：

 window.scrolling = !window.scrolling;

scrolling你想要的变量是不同的。

您应该像这样创建一个实际的函数：

var a = document.createElement('a');
a.className = (a.className || "") + ' topScroll';
a.style.display = 'block';
a.style.position = 'fixed';
a.style.bottom = '1em';
a.style.right = '1em';
a.style.color = '#FFF';
a.style.backgroundColor = '#000';
a.style.padding = '0.5em';
a.href = '#';
a.onclick = function(e){
    scrolling = !scrolling;
    return false;
};
scrollDiv.appendChild(a);

显然，设置 CSS 很糟糕，所以无论如何你都应该把它放在单独的样式表中。

于 2012-06-05T16:34:11.217 回答