Media Element Player終了フルスクリーンスクロールの問題

Question

私は、いくつかのビデオで縦にスクロールする長いWebページを持っています。 Media Element Playerを使用するとビデオは再生されますが、フルスクリーンモードにしてからフルスクリーンモードを終了すると、ページ上のビデオの位置に関係なく、ページは一番上に戻ります。私はそれを同じ場所に戻したい。ここで私が使用しているコードは次のとおりです。

var topPosition; 

MediaElementPlayer.prototype.enterFullScreen_org =   
MediaElementPlayer.prototype.enterFullScreen; 
MediaElementPlayer.prototype.enterFullScreen = function() { 
    console.log('enter full screen'); 
    this.enterFullScreen_org(); 
    topPosition = window.pageYOffset; 
    console.log(topPosition); 
} 

MediaElementPlayer.prototype.exitFullScreen_org = 
MediaElementPlayer.prototype.exitFullScreen; 
MediaElementPlayer.prototype.exitFullScreen = function() { 
    console.log('exit full screen') 
    this.exitFullScreen_org(); 
    ResetFullScreen(); 
} 

function ResetFullScreen() { 
    console.log('top pos:', topPosition); 
    setTimeout(function() { window.scrollTo(0, topPosition) }, 500); 
} 

にconsole.logは「topPosition」の正しい値を示したが、window.scrollToはメソッドが機能するように表示されません。

Answer 1

コードを調べると、それが機能するように見えます。しかし私は、うまくいくかもしれないスクロールを設定するもう一つの方法があります。これは、スクロールしようとしている要素がトップレベルにない場合に便利です。

スクロール位置保存：スクロール位置を設定する場合

topPosition = document.body.scrollTop; 

を：何をスクロールしようとしていることは、体内の要素ではなく、本体自体である場合

document.body.scrollTop = topPosition; 

スクロールする必要がある要素にdocument.bodyを置き換えてください。

MediaElementPlayer.prototype.enterFullScreen;' 

その行の末尾にランダムな引用があります：

また、私はあなたのコードで小さい事を発見しました。

---

編集：

この方法ではうまくいかない場合は、もう少し考えてみてください。視聴している動画をクリックすると、クリックした要素が変数に保存されます。全画面を終了した後、要素をスクロールして表示します。そうすれば、画面がフルスクリーンになった場所が多かれ少なかれます。

各ビデオには以下を含むonclickがあります。クリックした要素が保存されます。

lastVideoClicked = event.target; 

フルスクリーンを終了すると、このコードはその要素をスクロールして表示します。 、ページの一番下までスクロールし、あなたのJavaScriptコンソールを開き、コードを入力してくださいdocument.getElementById('hlogo').scrollIntoView() -

lastVideoClicked.scrollIntoView(); 

あなたは右ここでスタックオーバーフローのサイト上でそれを試してみることができます。スタックオーバーフローのロゴが表示されます。