Question

我正在尝试在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部分出现问题，但如果是，我似乎无法弄明白。

Answer 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很糟糕，所以无论如何你应该把它放在一个单独的样式表中。

Greasemonkey脚本似乎忽略了setInterval？

1 个答案: