如何“记住”在带有Ui.ROUTER的angularJS中的滚动位置

发布时间：2020-12-17 06:58:25 所属栏目：安全来源：网络整理

导读：我有一个项目我正在使用带有ui.router的angularJS,如果用户点击某个事件来查看详细信息,则会显示一个后退按钮但是在点击后面时,我们会有一个非常长的事件列表(具有无限滚动) div的滚动重置回顶部！寻找一些关于是否有内置的建议,我可以利用它来记住这个滚动

我有一个项目我正在使用带有ui.router的angularJS,如果用户点击某个事件来查看详细信息,则会显示一个后退按钮但是在点击后面时,我们会有一个非常长的事件列表(具有无限滚动) div的滚动重置回顶部！寻找一些关于是否有内置的建议,我可以利用它来记住这个滚动位置,我知道这是锚定服务,但我想知道是否有更适合停止角度重置导航滚动位置的东西??因为有一些相似的列表需要记住他们滚动时的状态..我已经调查并试图实现ui-router-extras dsr和sticky但是两者都没有工作..
例如 http://codedef.com/hapzis_poc/.不是完整的证明,但应该能够向下滚动事件,点击并返回并保持在相同的滚动位置..

解决方法

关于类似主题(ng-view)的讨论和@ br2000给出的答案对我有用.

https://stackoverflow.com/a/25073496/3959662

要使他的指令适用于ui-router,请执行以下操作：

1.创建这样的新指令：

(function () {
    'use strict';

    angular
        .module('your.module.directives')
        .directive('keepScrollPos',keepScrollPos);

    function keepScrollPos($route,$window,$timeout,$location,$anchorScroll,$state) {

        // cache scroll position of each route's templateUrl
        var scrollPosCache = {};

        // compile function
        var directive = function (scope,element,attrs) {

            scope.$on('$stateChangeStart',function () {
                // store scroll position for the current view
                if($state.$current)
                { 
                    scrollPosCache[$state.current.templateUrl] = [$window.pageXOffset,$window.pageYOffset];
                }
             });

            scope.$on('$stateChangeSuccess',function () {
                // if hash is specified explicitly,it trumps previously stored scroll position
                if ($location.hash()) {
                    $anchorScroll();

                // else get previous scroll position; if none,scroll to the top of the page
                } else {
                    var prevScrollPos = scrollPosCache[$state.current.templateUrl] || [0,0];
                    $timeout(function () {
                        $window.scrollTo(prevScrollPos[0],prevScrollPos[1]);
                },0);
            }
        });
    };

    return directive;
}
})();

2.在我拥有ui-view属性的元素上使用它,在我的例子中：

<div class="col-xs-12" ui-view keep-scroll-pos></div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!