Сохранять положение прокрутки при изменении маршрута в AngularJS?

Ответ 1

Я не использовал его раньше, но angular имеет $anchorScroll. Что касается перезагрузки данных, вы можете кэшировать его с помощью $cacheFactory или хранить данные в более высокой области.

Ответ 2

У меня есть скрипка, в которой показано, как восстановить положение прокрутки в представлении списка после подробного представления; еще не инкапсулированный в директиве, работая над этим...

http://jsfiddle.net/BkXyQ/6/

$scope.scrollPos = {}; // scroll position of each view

$(window).on('scroll', function() {
    if ($scope.okSaveScroll) { // false between $routeChangeStart and $routeChangeSuccess
        $scope.scrollPos[$location.path()] = $(window).scrollTop();
        //console.log($scope.scrollPos);
    }
});

$scope.scrollClear = function(path) {
    $scope.scrollPos[path] = 0;
}

$scope.$on('$routeChangeStart', function() {
    $scope.okSaveScroll = false;
});

$scope.$on('$routeChangeSuccess', function() {
    $timeout(function() { // wait for DOM, then restore scroll position
        $(window).scrollTop($scope.scrollPos[$location.path()] ? $scope.scrollPos[$location.path()] : 0);
        $scope.okSaveScroll = true;
    }, 0);
});

Сценарий также показывает выборку списка один раз за пределами "ListCtrl".

Ответ 3

Ниже приведена другая версия директивы keep-scroll-pos. Эта версия

• Сохраняет позицию прокрутки каждого шаблонаUrl вашего определения $routeProvider.

• Уважает хэш-теги, например, #/home # section-2, будет прокручиваться до # section-2, а не предыдущей позиции прокрутки.

• Прост в использовании, поскольку он является автономным и сохраняет внутренние позиции прокрутки.

Пример использования html:

<div ng-view keep-scroll-pos></div>

Код для директивы keepScrollPos ниже:

"use strict";

angular.module("myApp.directives", [])

.directive("keepScrollPos", function($route, $window, $timeout, $location, $anchorScroll) {

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

    // compile function
    return function(scope, element, attrs) {

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

        scope.$on('$routeChangeSuccess', 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[$route.current.loadedTemplateUrl] || [ 0, 0 ];
                $timeout(function() {
                    $window.scrollTo(prevScrollPos[0], prevScrollPos[1]);
                }, 0);
            }
        });
    }
});

Чтобы игнорировать ранее сохраненную позицию прокрутки и принудительно прокручивать вверх, используйте псевдо-хэш-тег: #top, например, href= "#/home # top".

В качестве альтернативы, если вы предпочитаете просто прокручивать вверх, используйте встроенную функцию автопрокрутки ng-view:

<div ng-view autoscroll></div>

Ответ 4

Я использовал решение @Joseph Oster, чтобы создать директиву. Я также взял на себя смелость обновить ответ для использования:

• $locationChangeStart
• $locationChangeSuccess

поскольку другие события устарели.

Fiddle здесь: http://jsfiddle.net/empie/p5pn3rvL/

Источник директивы:

angular.module('myapp', ['ngRoute'])
    .directive('autoScroll', function ($document, $timeout, $location) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.okSaveScroll = true;

            scope.scrollPos = {};

            $document.bind('scroll', function () {
                if (scope.okSaveScroll) {
                    scope.scrollPos[$location.path()] = $(window).scrollTop();
                }
            });

            scope.scrollClear = function (path) {
                scope.scrollPos[path] = 0;
            };

            scope.$on('$locationChangeSuccess', function (route) {
                $timeout(function () {
                    $(window).scrollTop(scope.scrollPos[$location.path()] ? scope.scrollPos[$location.path()] : 0);
                    scope.okSaveScroll = true;
                }, 0);
            });

            scope.$on('$locationChangeStart', function (event) {
                scope.okSaveScroll = false;
            });
        }
    };
})

Ответ 5

Я создал директиву, которая работает в прокрутке окна (она может обновляться для работы над любым элементом)

Использование html

<div ng-keep-scroll="service.scrollY">
<!-- list of scrolling things here -->
</div>

где "service.scrollY" ДОЛЖНО быть переменной внутри службы. Службы сохраняют свое состояние и ценности, контроллеры воссоздаются каждый раз, когда они загружают и очищают свои значения, поэтому вы не можете использовать их для хранения постоянных данных. контроллер имеет переменную scope, указывающую на службу.

директива js

app.directive('ngKeepScroll', function ($timeout) {
    return function (scope, element, attrs) {

        //load scroll position after everything has rendered
        $timeout(function () {
            var scrollY = parseInt(scope.$eval(attrs.ngKeepScroll));
            $(window).scrollTop(scrollY ? scrollY : 0);
        }, 0);

        //save scroll position on change
        scope.$on("$routeChangeStart", function () {
            scope.$eval(attrs.ngKeepScroll + " = " + $(window).scrollTop());
        });
    }
});

Ответ 6

Основываясь на большом ответе от br2000, я обновил директивный код для работы с ui-router. Для состояний с одинаковым именем, но с разными параметрами я сериализую объект $state.params для создания уникального ключа в объекте scrollPosCache.

.directive("keepScrollPos", function($state, $window, $timeout, $location, $anchorScroll) {

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

    // compile function
    return function(scope, element, attrs) {

      scope.$on('$stateChangeStart', function() {
        // store scroll position for the current view
        if ($state.current.name) {
          scrollPosCache[$state.current.name + JSON.stringify($state.params)] = [ $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.name + JSON.stringify($state.params)] || [ 0, 0 ];
          $timeout(function() {
            $window.scrollTo(prevScrollPos[0], prevScrollPos[1]);
          }, 0);
        }
      });
    }
  })

Ответ 7

Если вашей странице требуется выборка данных для отображения, вам, возможно, придется использовать $routeChangeSuccess и задержать вызов функции прокрутки.

    scope.$on("$routeChangeSuccess", function() {
        $timeout(function () {
            var scrollY = parseInt(scope.$eval(attrs.ngKeepScroll));
            $(window).scrollTop(scrollY ? scrollY : 0);
        }, 1000); // delay by 1 sec
    });

Ответ 8

Я сделал версию, которая работает с любым переполненным элементом, а не только с телом документа:

.directive("keepScrollPos", function($route, $timeout, $location, $anchorScroll) {

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

  return {
    restrict : 'A',
    link: function($scope, elements, attrs){

      $scope.$on('$routeChangeStart', function() {

        // store scroll position for the current view
        if($route.current)
          cache[$route.current.loadedTemplateUrl + ':' + attrs.keepScrollPos] = [elements[0].scrollLeft, elements[0].scrollTop];              

      });

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

        // else get previous scroll position and apply it if it exists
        var pos = cache[$route.current.loadedTemplateUrl + ':' + attrs.keepScrollPos];
        if(!pos)
          return;

        $timeout(function(){                  
          elements[0].scrollLeft = pos[0];
          elements[0].scrollTop = pos[1];            
        }, 0);

      });

    }
  }

})

Используйте его как:

<div keep-scroll-pos="some-identifier"> ... </div>

Ответ 9

Я нашел еще один простой способ решить эту проблему:

var scrollValue = $(window).scrollTop();

$rootScope.$on("$routeChangeStart", function() {
    scrollValue = $(window).scrollTop();
});

$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    setTimeout(function() { $(window).scrollTop(scrollValue); }, 0);
});

Просто поместите его в .run().

Таким образом, при установке значения тайм-аута в 0 оно все еще работает, но выполняется после того, как страница отображается (без функции тайм-аута она запускается до отображения содержимого (т.е. шаблона или загрузки данных), что делает функцию бесполезной.

Если вы извлекаете данные из некоторого API, вы можете завершить тайм-аут в функции в $rootScope и запустить ее после успешного запроса.

Ответ 10

Вам нужно reset положение прокрутки при каждом изменении маршрута. Используйте это в своем основном AppController:

  $scope.$on("$routeChangeSuccess", function () {
    $anchorScroll();
  });

Или, если вы используете u-route:

  $scope.$on("$stateChangeSuccess", function () {
    $anchorScroll();
  });

Для получения дополнительной информации см. В AngularJS, как добавить $watch в хеш URL-адреса?

Ответ 11

это может решить вашу проблему, это работает для меня $httpProvider.defaults.cache = true;

Ответ 12

В отличие от других ответов, я хотел запомнить больше, чем просто свитки, а именно input field value s.

Не только это, но многие из них предполагали

• вам нужно только запомнить один элемент прокрутки (возможно, у вас есть панели или какой-либо другой экран, похожий на приложение),
• у вас есть body как ваш прокручиваемый элемент (например, что, если вы используете angular привязку?),
• или ваш элемент прокрутки не заменяется на angular (т.е. вне ng-view).

<body> <!-- doesn't scroll -->
    <div snap-drawers>..</div>

    <div snap-content="" history="scrollTop"> <!-- the scrolling div-->
        <header>...</header>

        <div ng-view>
            <input name="email" history="val"> <!-- tag with value we want remembered -->

            <div history="scrollLeft" history-watch="scroll" id="evenHorizontalScroll"><!--
                custom value we want remembered.
                NB it must have an id to be identified after angular
                removes it from the DOM between views,
                and since it is not a recognised default we can tell my
                directive the jquery event function what to watch
            --></div>
        </div>
    </div>
</body>

Я написал директиву с разделяемой областью [n, к сожалению, намного больше], которая заботится об этих проблемах.

.directive('history', function($compile, $rootScope, $location) {
    return {
        restrict : 'A',
        replace : false,
        scope : false,

        controller : function($scope, $timeout) {
            //holds all the visited views
            var states = new Object();
            //the current view
            var state = null;
            //how many names have been generated where the element itself was used
            var generated = 0;

            //logs events if allowed
            function debug(from) {
                //comment this to watch it working
                //return;

                console.log('StateHistory: ' + from);
                if (from == 'went')
                    console.log(state);
            }

            //applies the remembered state
            function apply() {
                var element;
                //for each item remembered in the state
                for (var query in state) {
                    //use the element directly, otherwise search for it
                    (state[query].element || $(query))
                        //use the appropriate function
                        [state[query].property](
                            //and set the value
                            state[query].value
                        )
                    ;
                    debug('applying:' + query + ':' + state[query].value);
                }

                //start recording what the user does from this point onward
                $scope.ignore = false;
            }

            //generates a reference we can use as a map key
            $scope.generateRef = function() {
                return '' + (++generated);
            };

            //views changed
            $scope.went = function() {
                debug('went');

                //set the current state
                state = states[$location.path()];

                //if we dont remember the state of the page for this view
                if (!state)
                    //get recording!
                    state = states[$location.path()] = new Object();

                //apply the state after other directives
                //(like anchorScroll + autoscroll) have done their thing
                $timeout(apply);
            };

            //one of the elements we're watching has changed
            $scope.changed = function(name, element, property, useObject) {
                //if we're not meant to be watching right now
                //i.e. if the user isnt the one changing it
                if ($scope.ignore) {
                    debug('ignored');
                    return;
                }

                //if we havent recorded anything for this here yet
                if (!state[name]) {
                    //start recording
                    state[name] = {property:property};

                    //and remember to leave behind a reference if the name isn't
                    //good enough (was generated)
                    if (useObject)
                        state[name].element = element;
                }

                //use the requested function to pull the value
                state[name].value = element[property]();

                debug('changed:' + name + ':' + state[name].value);
            };

            //initial view
            $scope.went();

            //subsequent views
            $rootScope.$on('$routeChangeSuccess', $scope.went);
            $rootScope.$on('$routeChangeError', $scope.went);

            $rootScope.$on('$routeChangeStart', function() {
                debug('ignoring');
                $scope.ignore = true;
            });
        },

        link: function (scope, element, attrs) {
            //jquery event function name
            var watch = attrs.historyWatch;
            //if not set, use these defaults
            if (!watch) {
                switch (attrs.history) {
                case 'val':
                    watch = 'change';
                    break;
                case 'scrollTop':
                    watch = 'scroll';
                    break;
                default:
                    watch = attrs.history;
                }
            }

            //the css selector to re-find the element on view change
            var query = null;
            //the reference to the state remembered
            var name;

            //try using the id
            if (attrs.id)
                name = query = '#' + attrs.id;
            //try using the form name
            else if (attrs.name)
                name = query = '[name=' + attrs.name + ']';
            //otherwise we'll need to just reference the element directly
            //NB should only be used for elements not swapped out by angular on view change,
            //ie nothing within the view. Eg the view itself, to remember scrolling?
            else
                name = scope.generateRef();

            //jquery value function name
            var property = attrs.history;

            //watch this element from here on out
            element.on(watch, function() {
                scope.changed(name, element, property, !query);
            });
        }
    };
})

Ответ 13

Я использую собственное решение в своем проекте.

Шаг 1: Получите позицию щелчка по списку и сохраните его в локальном хранилище.

var position = document.body.scrollTop;
localStorage.setItem("scrollPosition",position);

Шаг 2: В подробном представлении установите глобальную переменную backFromDetailView в true.

backFromDetailView = true;

Шаг 3: Возврат с подробной страницы просмотра в список. Все содержимое перезагружается с сервера снова до прокрученной позиции.

Для этого свяжите функцию в html, используя следующую строку:   

И контроллер содержит функцию:

$scope.goto = function (){
    if(backFromDetailView){
         window.scrollTo(0, localStorage.getItem("scrollPosition"));
     }
}

Некоторые недостатки этой техники:

• Все содержимое, включая дополнительный контент, перезагружается снова.

• В iOS черный экран появляется перед прокруткой к соответствующему положение.

Ответ 14

Отличное решение от @br2000.

Однако, к сожалению, моя страница, на которую я прокручивала назад, по-прежнему загружала данные из backend в длинный список, когда директива пыталась восстановить позицию.

Поэтому, очевидно, не удалось восстановить положение прокрутки. Я решил это, используя $interval вместо $timeout и дал ему 20 повторений с 300ms timeout. Я сохранил обещание, возвращенное с $interval, а затем проверил внутри функции $interval, если текущая позиция теперь такая же, как и сохраненная позиция, и если да, я вызываю метод scope, который отменяет $interval - $interval.cancel(promise).

Кроме того, первоначально мои pageYOffset и pageXOffset всегда были 0, потому что overflow-x: hidden был применен к корню div в DOM. Я решил его, обернув корень div внутри другого div, на котором я тогда разместил эту директиву.