有没有办法阻止浏览器缓存滚动位置和缩放级别等值?

时间:2015-02-09 21:20:31

标签: javascript html css zoom browser-cache

我正在设计一个完全在浏览器中进行的交互式网页游戏。它使用html5,一切(包括元素)都是游戏世界的一部分。既然如此,我需要对元素的定位,滚动位置,缩放等进行非常严格的控制。

一个特定级别要求将一个元素放在屏幕外(就在视口外),以便用户必须滚动页面才能找到它。不幸的是,在滚动之后,页面似乎记录了页面的新宽度,包括最初看不见的元素。刷新页面时,将调整缩放级别以使整个屏幕与隐藏元素一致进入视口。这消除了拼图并破坏了关卡。

我知道浏览器存储滚动位置等信息,以便当用户重新访问页面时,他们可以在他们中断的地方继续搜索。这对某些事情很好,但对我的目的不好。有没有办法阻止我的浏览器的缓存行为?有没有办法使用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. */
});

1 个答案:

答案 0 :(得分:0)

我设法解决了我的问题,方法是将隐藏元素放在html流中,将其css position属性设置为fixed。我通过使用一些自定义触摸事件处理程序更改元素style.left值来模拟页面滚动。通过添加屏幕外元素,页面无需调整大小或缩放,因为固定位置元素不会影响布局。

然而,这并没有回答我关于重置缩放级别的问题,我仍然会感谢任何人可能有的洞察力。