链接到一个带有哈希片段的页面(这样用户就可以看到页面上的特定内容）问题

Linking into a page with a hash fragment (so user lands at specific content on page) issues

本文关键字：就可以 问题 用户 一个 哈希 链接 片段      更新时间：2023-09-26

我想要的功能：

我想给用户一个像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()的初始调用会捕获它们。

相关文章：