媒體元素播放器退出全屏滾動問題

我有很長的網頁，可以垂直滾動幾個視頻。使用媒體元素播放器，視頻播放，但如果您進入全屏模式，然後退出全屏模式，則無論頁面上的視頻位於何處，頁面都會返回到最頂端。我希望它回到同一個地方。下面是我使用的代碼：媒體元素播放器退出全屏滾動問題

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方法沒有出現一起工作的正確價值。

來源

2016-06-13 The Hawk

通過您的代碼看，它似乎應該工作。不過，我確實有另外一種方法來設置可能有用的滾動條。如果您嘗試滾動的元素不在頂層，這將非常有用。

當存儲滾動位置：

topPosition = document.body.scrollTop;

當設置滾動條的位置：

document.body.scrollTop = topPosition;

如果你想滾動什麼是身體內的元素，而不是身體本身，只需將document.body替換爲需要滾動的元素即可。

另外，我發現代碼中的一件小事：

MediaElementPlayer.prototype.enterFullScreen;'

有在該行的最後一個隨機的報價。

編輯：

如果該方法不起作用，我還有一個想法給你。當他們點擊他們查看的視頻時，將他們點擊的元素存儲在一個變量中。離開全屏後，將元素滾動到視圖中。這樣，或多或少，您將成爲屏幕進入全屏時的位置。

每個視頻都有一個onclick，其中包含以下內容;這存儲他們點擊的元素。

lastVideoClicked = event.target;

當離開全屏時，此代碼將嘗試將該元素滾動回視圖。

lastVideoClicked.scrollIntoView();

你可以嘗試一下在堆棧溢出現場就在這裏 - 滾動到頁面的底部，打開您的JavaScript控制檯，輸入代碼document.getElementById('hlogo').scrollIntoView()。這將Stack Overflow標誌滾動到視圖中。

來源

2016-06-13 19:07:35 MineAndCraft12

這將工作，但由於某種原因，在退出全屏後，document.body.scrollTop屬性不起作用。它在全屏幕的進入/退出之前工作，但不在之後。我在控制檯上測試過。 –

這真的很奇怪......我從來沒有見過這種情況發生過。我將再添加一個我能想到的方法的答案... – MineAndCraft12

媒體元素播放器退出全屏滾動問題

回答

相關問題