我正在设计一款完全在浏览器中进行的交互式网络游戏。它使用 html5,一切(包括元素)都是游戏世界的一部分。由于是这种情况,我需要对元素的定位、滚动位置、缩放等进行一些非常严格的控制。
一个特定的级别要求将元素放置在屏幕外(就在视口(viewport)之外),以便用户必须滚动页面才能找到它。不幸的是,滚动之后,页面似乎记录了页面的新宽度,包括原来看不见的元素。刷新页面时,将调整缩放级别以将整个屏幕和隐藏的元素放入视口(viewport)中。这泄露了谜题并破坏了关卡。
我知道浏览器会存储滚动位置等信息,以便当用户重新访问该页面时,他们可以从离开的地方继续。这对某些事情很好,但对我的目的不利。有没有办法阻止我的浏览器的这种缓存行为?有没有办法使用 JavaScript 获取或设置页面的缩放级别?
目前我正在使用下面的代码在用户离开页面之前重置滚动位置。它运行良好,但用户可以在离开前看到页面滚动。
window.addEventListener("beforeunload",function(event_){
window.scrollTo(0,0);
/* What I would love is if there were a way to do this: */
// window.zoomTo(1.0);
/* But I'm sure that's asking for too much. */
});
最佳答案
通过将隐藏元素的 css position
属性设置为 fixed
,我设法将隐藏元素完全排除在 html 流之外,从而解决了我的问题。我通过使用一些自定义触摸事件处理程序更改元素 style.left
值来模拟页面滚动。添加离屏元素后,页面无需调整大小或缩放,因为固定位置元素不会影响布局。
然而,这并没有回答我关于重置缩放级别的问题,我仍然很感激任何人可能有的任何见解。
关于javascript - 有没有办法阻止浏览器缓存滚动位置和缩放级别等值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28419597/