Javascript window.Scroll是否可以在Safari中异步工作?
最近我发现在Safari(6.0.5(8536.30.1)、MacOS 10.8.4)中window.scrollTo的行为非常奇怪(在我看来)。它似乎是异步工作的 我的任务听起来像:Javascript window.Scroll是否可以在Safari中异步工作?,javascript,safari,scroll,Javascript,Safari,Scroll,最近我发现在Safari(6.0.5(8536.30.1)、MacOS 10.8.4)中window.scrollTo的行为非常奇怪(在我看来)。它似乎是异步工作的 我的任务听起来像: 将一些绝对定位的div固定(固定) 翻页吗 使先前修改的div绝对位于后面(取消固定) 所以要取消绑定这个div,我必须在滚动修改完成后执行unpin例程。在这里我遇到了问题。除Safari外,我检查的每个浏览器都能正确执行 复制步骤: 在Safari中打开任何网页,确保其至少可滚动100px,且其初始滚动偏
- 将一些绝对定位的div固定(固定)
- 翻页吗
- 使先前修改的div绝对位于后面(取消固定)
window.scrollTo(01100);console.log(document.body.scrollTop)代码>
window.scrollTo(01100)时;setTimeout(函数(){console.log(document.body.scrollTop)},1)代码>输出为100,如预期
以下是我测试过的所有其他浏览器(工作正常):
- 铬27.0.1453.110(MacOS 10.8.4)
- Firefox21.0(MacOS 10.8.4)
- 歌剧院12.15 b1748(MacOS 10.8.4)
- IE 8.0.7601.17514(Win7)
好的,只要我的代码示例不是跨浏览器的,就可以更容易地使用jQuery在任何网页上检查这种行为:
var $w = $(window);
$w.scrollTop(100);
console.log($w.scrollTop());
VS
var $w = $(window);
$w.scrollTop(100);
window.setTimeout(function() {
console.log($w.scrollTop())
}, 1);
这种行为是正常的还是一个bug?如何处理?(现在我修改了$.fn.scrollTop
,以返回$。延迟,而不是在除Safari之外的所有浏览器的主线程中链接并立即解决它)。我实际上只是尝试了,但即使使用Safari 6.0.5(在Lion上,即OS X 10.7),也无法重现您的问题
您可以在运行时确认它是否适用于所有Safari版本(5.1、6.0、6.1、7、8)
事实上,我引用的是:
当用户代理要执行滚动框到位置的平滑滚动时,它必须在用户代理定义的时间内以用户代理定义的方式更新滚动框的滚动位置。滚动完成后,框的滚动位置必须为position。滚动也可以通过算法或用户中止
除非我读错了,否则Safari有权在制作卷轴动画时给你旧的值(或者任何东西)。因此,如果浏览器想将设置超时发挥到极致,您的setTimeout
方法甚至可能无法正常工作。在requestAnimationFrame
中设置scroll top实际上解决了我在浏览器中遇到的问题 JavaScript滚动函数通常是同步工作的。我在scrollBy()
中遇到了类似的问题,我注意到它是异步运行的,这导致了我的函数崩溃。问题在于浏览器具有默认的CSS属性滚动行为:smooth
,这导致滚动功能与异步运行的requestAnimationFrame()
一起自动运行。确保滚动行为
具有值unset
,或者在CSS中全局覆盖它,如下所示:
* {
scroll-behavior: unset
}
只是想说明一下,超时实际上帮助我们解决了今天的一个问题。我知道这不是最好的,但这是一个有效的解决办法。@seangates Thx的说明。我用延迟实例作为返回对象重写了$.scrollTo方法。发现这在这种情况下最适用,但不幸的是没有向后兼容性(如果您可以共享该代码,这将对社区非常有用。很抱歉,我没有为您提供答案。希望我有答案。:DNowwindow.scrollTo(0,100);console.log(document.body.scrollTop);
在Safari 8中运行良好。关闭它。是的,在版本8.0.3(10600.3.18)上进行了测试,您的代码运行良好。对于较旧的Safari浏览器,我想在完成scrollTop之前可能存在某种差距。我已尝试查找此问题,但当前的实现应该是“同步”->。如果您感兴趣,这里是jQuery代码:它看起来不是异步的。因为您使用的是它,而不是本机浏览器功能,谢谢。我一直在努力以角度设置页面转换动画,同时滚动到顶部,因为(仅)中有一个难看的视觉故障Safari.requestAnimationFrame
很好地解决了这个问题。