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ようにすると、期待どおりに機能しません。YourinnerHTMLは単なる文字列であるため、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 に答える