媒体元素播放器退出全屏滚动问题
提问于 2016-06-13 10:35:56
我有很长的网页，垂直滚动几个视频。使用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方法似乎不起作用。
回答 1
Stack Overflow用户
发布于 2016-06-13 11:07:35
看一看您的代码，它似乎应该可以工作。不过，我还有一种方法来设置可能起作用的卷轴。如果要滚动的元素不在顶层，这将非常有用。
存储滚动位置时：
topPosition = document.body.scrollTop;设置滚动位置时：
document.body.scrollTop = topPosition;如果要滚动的是主体内的元素，而不是主体本身，只需将document.body替换为需要滚动的元素即可。
另外，我在您的代码中发现了一个小问题：
MediaElementPlayer.prototype.enterFullScreen;'在这一行的末尾有一个随机的引号。
编辑：
如果那个方法不起作用，我还有一个主意要告诉你。当他们点击他们查看的视频时，将他们点击的元素存储在一个变量中。离开全屏后，将元素滚动到视图中。这样，你就会或多或少，在屏幕进入全屏时的位置。
每个视频都有一个包含以下内容的onclick；这将存储他们单击的元素。
lastVideoClicked = event.target;当离开全屏时，此代码将尝试将该元素滚动回视图。
lastVideoClicked.scrollIntoView();您可以在这里的Stack溢出站点上试用它--滚动到页面的底部，打开javascript控制台，然后输入代码document.getElementById('hlogo').scrollIntoView()。此滚动堆栈溢出徽标进入视图。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37796877
复制相关文章
![如何正确使用Node.js事件[每日前端夜话0x4B]](https://ask.qcloudimg.com/http-save/yehe-1120945/g288x6sr1r.jpeg)
腾讯云开发者
