0

ページが完全に読み込まれ、scrollBy関数で定義されたスクロールオフセット位置にジャンプした後、ブラウザにページを表示しようとしています。その効果はどのように達成できますか？

私がウェブ上で見たほとんどの解決策は、「オンロード」で要素を非表示/表示することです。しかし、オフセットを使用すると機能しないようです。

たとえば、私はこれまでにいくつかのことを試しました。与えられたサンプルコードでは、scrollby関数が実行された後に可視性の値をvisibleに変更します。しかし、何らかの理由で、scrollby関数は常に最後に実行されているように見えます。その結果、ページが一番上に表示され、すぐにオフセットにジャンプします。

私が試した他のバリエーションは、「display：block」を使用し、ページ全体をカバーするオーバーレイdivを使用することです。これは、後でjavascriptで削除されます。ただし、結果は同じです。「goToByScroll」関数の順序に関係なく、scrollby関数は常に最後に実行されているように見えます。

function goToByScroll()
{
    window.scrollBy(0,300); // Jumps to specific offset

    document.getElementById("page").style.visibility="visible"; 
}
window.onload = goToByScroll;
4

1 に答える 1

0

スクロール位置を設定してから新しいスタイルを適用するまでの間に、ブラウザに制御を戻す必要があります。簡単な編集：

function goToByScroll()
{
    window.scrollBy(0,300); // Jumps to specific offset

    setTimeout('document.getElementById("page").style.visibility="visible"', 0); 
}
window.onload = goToByScroll;

それ以外の場合、DOMの変更がブラウザーによって適用される順序は、決定論的ではありません。

JavaScriptコードが実行されている間、ブラウザーはDOMに更新を適用しません。大きなテーブルを繰り返し処理し、すべてのセルに書式を適用することを想像してみてください。作成者は通常、これらすべての変更を瞬時に表示する必要があります。

ブラウザは、JavaScriptがアイドル状態のとき（たとえば、別のイベントを待機しているとき）にのみDOMに更新を適用します。 setTimeoutこれは、処理を遅らせ、ブラウザがこれまでに行った変更を適用できるようにする1つの方法です。

ただし、setTimeout新しい実行コンテキストが作成されるため、関数のローカル変数にアクセスできなくなります。理想的には、setTimeoutを使用して引数なしの関数のみを呼び出す必要があります。そうしないと、別の悪意のあるevalステートメントになります。

function goToByScroll()
{
    window.scrollBy(0,300); // Jumps to specific offset
    setTimeout(showPage, 0);
}

function showPage()
{
    document.getElementById("page").style.visibility="visible"; 
}

window.onload = goToByScroll;
于 2012-10-16T11:49:37.190 に答える