我想要的功能:
我想给用户一个像mysite.com/foo#bar
这样的链接,这样当他们点击这个链接时,他们就会降落在页面foo上,并在页面的一半向下滚动到id为bar
的内容。需要注意的是,此链接将始终从场外单击或手动键入地址栏,用户不会已经在加载了所有资产的页面上。
此外,我正在使用angular和有问题的页面,每个内容位都在一个元素指令中,并且在每个指令模板中都有图像
问题:
很简单吧?好吧,我遇到了一些问题,大多数时候它是有效的,但可能40%的时候它不起作用,用户在内容上方着陆,我相信这是因为浏览器滚动到页面上的正确点,但随后图像会加载到页面上方,将页面的其余部分向下推,让用户处于一个随机的无意识位置。(由于某种原因,iPhone的故障率似乎更糟…(
到目前为止我尝试了什么:
在run函数中,我在任何路由上查找哈希片段,如果存在,则滚动到它。
if($location.hash()) {
$anchorScroll();
}
我试过:
- 在超时时包装
这有时有效,但显然不一致,当然我可以将其设置为500ms,在良好的wifi连接上也可以,但在信号差的手机上不行
- 正在侦听$viewContentLoaded
太快了,ui路由器似乎在页面呈现之前触发了这个事件
为页面上的所有指令在每个post-link函数中发出一个事件。
link: function ($scope) { $scope.$emit('loadingFinished');
然后在运行功能中再次拾取
$scope.$on('loadingFinished', function () {
$timeout(doAnchorScroll, 500);
}
这提高了成功率,但仍然不是万无一失的。我亲眼目睹了它让用户被困在奇怪的地方,主要是在iPhone上。
有人能提出一种检测可以安全滚动的时刻的方法,或者其他确保降落在正确位置的方法吗?
有两件事——首先是用户滚动应该阻止它——如果他们已经滚动了,你不想滚动视图。第二个是监听图像以完成加载。
听图像很容易:
$("img").one("load", $anchorScroll);
然后在$anchorScroll中,我建议检查是否所有图像都已加载,如果没有,则立即返回(如果您只检查锚上方的图像,但只快速回复,则可获得奖励(:
var scrolled = false;
function $anchorScroll() {
var allLoaded = true;
$("img").each(function() {
if (!this.loaded) {
return allLoaded = false;
}
});
if (scrolled || !allLoaded) {
return;
}
...
滚动可能会稍微困难一点-你可以检查滚动事件,但不同平台之间的滚动事件略有不同-甚至可能会因为手动滚动而被解雇-如果你发现发生了这种情况,那么只需有一个全局消息,上面写着"我在这里滚动"并忽略它,否则:
$(document).one("scroll", function() { // Use ".on" if this gets fired for code...
scrolled = true;
});
请注意,您可能不需要关心失败的映像加载或已经加载的映像加载,因为对$anchorScroll()
的初始调用会捕获它们。