Question

我有一个很长的网页，可以垂直滚动几个视频。使用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;

当离开全屏时，此代码将尝试将该元素滚动回视图。

lastVideoClicked.scrollIntoView();

您可以在此处的Stack Overflow站点上进行试用 - 滚动到页面底部，打开您的javascript控制台，然后输入代码document.getElementById('hlogo').scrollIntoView()。这会将Stack Overflow徽标滚动到视图中。

媒体元素播放器退出全屏滚动问题

1 个答案: