0

私はプログラミングに比較的慣れておらず、ポップアップ付きのChrome拡張機能に取り組んでいます。ポップアップ呼び出し間のスクロール位置を保存したい。インターネットでたくさんの情報を見つけたようですが、今のところ問題を解決することができていません。スクロール位置の保存は私の拡張機能内ではほとんど機能しますが、2つの問題が発生しています。

1）各スクロールイベントでスクロール位置を保存するには、次を使用します。

addEventListener('scroll', function(){
   localStorage.scrollTop = document.body.scrollTop;
});

ポップアップが開いたら、次を使用します。

document.body.scrollTop = localStorage.scrollTop

これは、スクロール位置がポップアップの高さを超えるまでは正常に機能するようです。Chrome拡張機能で表示されるコンテンツの最大ポップアップ高さは600pxです。document.body.style.heightまた、常に600pxを超える固定値です。スクロール位置が-600pxより大きい場合document.body.style.height、たとえば900px-600pxdocument.body.scrollTopは、300pxにリセットされます。ポップアップを閉じる前の最後のスクロール位置（document.body.scrollTop）が400pxであったとしても、ポップアップを再度開くとスクロール位置は300pxにリセットされます。明らかに、400pxの適切なスクロール位置の値（たとえば）が300pxで上書きされるため、間違ったスクロール位置を取得します。

ただし、常に発生するとは限りません。たとえば、ウィンドウの高さが900pxで500pxのスクロール位置を適切に保存できる場合と、できない場合があります。なぜこれが効果があるのか​​はわかりませんが、ポップアップのコンテンツが高くなると、問題は魔法のように解消され、適切なスクロール位置が保存されます。

この状況でスクロール位置が表示されたときに、スクロール位置を適切に保存するにはどうすればよいですか？おそらく私は根本的に間違ったことをしているのでしょうか？

（これは読みにくいようです。上記のコードを支援できることを願っています。）

2）上記の問題と絡み合っているのではないかと思いますが、よくわかりません。すべてのスクロールイベント（この投稿の最初のコードブロック）に対して、2つのスクロールイベントが発生しているのがわかります。

ポップアップを開いただけでマウスホイールをスクロールしないと、イベントリスナー内のコードが起動します。最初のイベントが発生すると、document.body.scrollTopは「間違った」値（上記の例では300px）にリセットされます。これが両方の問題の根本的な原因である可能性があると思います。

イベントリスナーは、マウスホイールを動かした場合にのみ起動する必要があります。したがって、ポップアップを開いてもマウスホイールに触れていない場合、イベントリスナー内のコードは実行されません。

4

2 に答える 2

3

問題は実際には対応するCSSコードにありました。は<div>スクロール可能ではなかったため、ポップアップの表示領域よりも大きいスクロール位置を保存することはできませんでした。

position: relative;解決策は、CSS要素にand overflow-y: auto;（overflow-y: scroll;同様に機能する）プロパティを追加することでした。

これらのプロパティが追加されると、スクロール位置をオブジェクトに適切に保存できました。

于 2012-11-27T11:19:43.727 に答える
0

私はこれが答えであってはならないことを知っていますが、コメントでコードをフォーマットすることはできません：

手足に出て、基本的な仮定の1つをテストすることをお勧めします： スクロールイベントは順番に発生していますか？

これを試して、有用なデバッグ情報が追加されるかどうかを確認してください。

var scrollCounter = 0;
addEventListener('scroll', function(){
   localStorage.scrollTop = document.body.scrollTop;
   console.log({counter: scrollCounter, scrollTop: document.body.scrollTop});
   scrollCounter++
})

数字が飛び交うように見えるかどうか、または数字が漸進的に進むかどうかを確認します。

編集：可能な解決策のPコード

fixここでは修正という言葉を大まかに使用していますが、私はのアイデアを持っていると思います。

var captureSemaphore; // Use this to flag exactly when we want the `scrollTop` captured.
captureSemaphore = true; // Go into catch mode

addEventListener('scroll', function(){
   if (captureSemaphore) {
     localStorage.scrollTop = document.body.scrollTop;
    }
});

// then later, right before you open your popup
captureSemaphore = false; // Disable catch mode because the screen is about to change
openPopup();              // Open the popup

// Elsewhere

closePopup();            // Close the popup
captureSemaphore = true; // Go into catch mode
于 2012-09-23T03:58:36.337 に答える