我的任务听起来像:
使一些绝对定位的div被固定(定位)
>做一些页滚动
>使以前修改的div绝对定位(取消固定)
所以要取消这个div,我必须执行unpin例程只是在滚动修改完成后.在这里我遇到了这个问题.我检查的每个浏览器都是正确的,除了Safari.
复制步骤:
>在Safari中打开任何网页,并确保它至少可滚动100像素,它的初始滚动偏移量为0
>在开发工具中打开js控制台
> execute:window.scrollTo(0,100);的console.log(的document.body.scrollTop);
输出为0.但是当我将此代码更改为window.scrollTo(0,100); window.setTimeout(function(){console.log(document.body.scrollTop)},1);输出为100,如预期.
这里是我测试过的所有其他浏览器(它工作正常):
> Chrome 27.0.1453.110(MacOS 10.8.4)
> Firefox 21.0(MacOS 10.8.4)
> Opera 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);
这个行为是否正常或是否是错误?如何处理? (现在我修改了$.fn.scrollTop以返回$.Deferred而不是链接,并在除Safari之外的所有浏览器的主线程中立即解析它).
解决方法
您可以使用https://www.browserstack.com/screenshots运行此jsfiddle,以确认它适用于所有Safari版本(5.1,6.0,6.1,7,8).
事实上,spec说,我引用:
When a user agent is to perform a smooth scroll of a scrolling Box Box to position,it must update the scroll position of Box in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is completed,the scroll position of Box must be position. The scroll can also be aborted,either by an algorithm or by the user.
除非我正在读错,否则Safari可以在动画动画时给予您旧的价值(或任何东西).因此,如果浏览器想要将其置于极限状态,您的setTimeout方法可能无法正常工作.