有没有一种方法可以设置窗口的滚动位置,而不使用scroll()或scrollTo()函数?

4

我问这个问题的原因是,Safari在其scroll()实现中存在一个bug,导致我的用户界面出现问题。

想象一个页面:

<body>
    <div id="huge" style="width: 4000px; height: 4000px;"></div>
</body>

我们希望您能同时获得水平和垂直滚动条。通常情况下,当您按下滚动条时,页面会垂直滚动。但是为了我们的高级用户界面,我们不希望发生这种情况,因此我们抑制了keyDown事件:

window.onkeydown = function(e) {
    if(e.keyCode == 32)
    {
        return false;
    }
};

这个很好用...除非我们决定不完全禁止滚动,而是想要自定义滚动行为:

window.onkeydown = function(e) {
    if(e.keyCode == 32)
    {
        window.scroll(foo, bar); // Causes odd behavior in Safari
        return false;
    }
};

在其他浏览器(Chrome,Firefox)中,这会立即将窗口的滚动位置移动到所需的坐标。但在Safari中,这会导致窗口以类似于按下空格键时发生的滚动动画的方式动画化到所需的滚动位置。
请注意,如果您在除空格键以外的任何键上触发此滚动,则不会发生动画效果;窗口会像其他浏览器一样立即滚动。
如果您要滚动1000像素或更多,则动画滚动可能会引起一些严重的不适。
我正在想方设法解决这个问题。我怀疑没有方法,但我希望JavaScript之神能提出建议。我真的很想能够使用空格键执行此命令。

你有没有考虑直接设置Y偏移量,而不是让window.scroll为你完成?我在Safari中就是这样处理滚动的,效果很好。我同意这不是一个完美的解决方案。 - Pete Wilson
@Pete 我不太确定你的意思。是指手动调整 #huge div 的 Y 位置吗?还是其他什么? - Ender
huge.style.top = target_scroll_to.toString() + 'px'; 巨大的.style.top = target_scroll_to.toString() + '像素'; - Pete Wilson
2个回答

2

如果您知道文档中要滚动到哪里,那么可以使用命名锚点。将document.location设置为锚点(例如#top#div50或其他)应该非常可靠。


很遗憾,我需要使用像素坐标,但那是个好主意!我想我可以创建一个临时的、绝对定位的锚点,然后立即滚动到它... - Ender

-1

使用 document.documentElement.scrollTop = ...(在某些浏览器中还需使用 document.body)。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接