Angular ui-router scroll to top, not to ui-view

Question

Je viens de passer à ui-router 0.2.8 de 0.2.0 et j'ai remarqué que lorsque l'état change, la position de défilement saute en haut de l'enfant. ui-view qui est le sujet du nouvel état.

C'est très bien, mais cela me pose deux problèmes :

1) J'ai un remplissage de 30px entre le haut de la page et le ui-view et je voudrais qu'il défile jusqu'en haut de la page, en laissant un espace. Pour l'instant, il va exactement en haut de la page. ui-view ce qui n'est pas beau à voir. Pour y parvenir, j'ai besoin de savoir comment faire défiler le texte jusqu'au sommet de la division dans laquelle se trouve la vue utilisateur (et non pas dans le navigateur). viewport ), ou je dois trouver comment remplacer les $uiViewScroll pour passer à la ui-view moins 30px.

J'ai essayé $uiViewScrollProvider.useAnchorScroll(); mais si je fais cela, il ne défile pas du tout. J'ai également essayé <ui-view autoscroll="false">; qui arrête aussi complètement le défilement.

2) Pour l'instant, il ne défile pas vraiment, il ne fait que sauter. Est-il censé défiler ou est-ce au développeur de le faire avec des transitions CSS ?

Toute aide serait vraiment appréciée :)

Answer 1

Une autre approche consiste à décorer l'option par défaut $uiViewScroll ce qui a pour effet de remplacer le comportement par défaut.

app.config(function ($provide) {
  $provide.decorator('$uiViewScroll', function ($delegate) {
    return function (uiViewElement) {
      // var top = uiViewElement.getBoundingClientRect().top;
      // window.scrollTo(0, (top - 30));
      // Or some other custom behaviour...
    }; 
  });
});

Et comme Hubrus l'a mentionné, pour tout <ui-view> vous ne souhaitez pas que cela s'applique, ajoutez simplement autoscroll="false" . Je ne me suis pas penché sur l'implémentation du défilement proprement dit, je me suis juste dit que je mentionnerais la méthode des décorateurs (c'est très amusant) comme alternative. Je suis sûr que vous pouvez trouver le comportement exact du défilement.

Answer 2

Lorsque le chemin change, le routeur diffuse un événement : $stateChangeSuccess, c'est-à-dire que l'url a changé, il suffit de l'écouter et d'utiliser jquery pour faire défiler le haut de la page.

$rootScope.$on('$stateChangeSuccess',function(){
    $("html, body").animate({ scrollTop: 0 }, 200);
})

placer le code ci-dessus à l'intérieur de

yourAppName.run(function(){

    //the above code here
 })

Answer 3

J'ai eu le même problème. J'ai une barre de navigation à sommet fixe. Si je mets autoscroll="true" dans l'ui-view, elle défile jusqu'en haut moins la hauteur de la barre de défilement.

J'ai donc supprimé le style qui ajoutait le rembourrage au corps de la barre navale supérieure.

// fixed navigation at top
//body { padding-top: 100px; }

Et l'a appliqué à l'ui-view

[ui-view=main] {
    padding-top: 100px;
}

Maintenant, autoscroll="true" fonctionne comme prévu.

Answer 4

1) Je pense que le moyen le plus simple est de mettre autoscroll="false" sur le ui-view et de manipuler le défilement dans le $viewContentLoaded événement.

2) Voici le comportement par défaut du navigateur sur les ancres

Answer 5

Depuis $stateChangeSuccess semble ne plus être disponible dans la version actuelle d'AngularJS (comme 1.2.x). l'exemple de Rishul Mattas par le suivant qui fonctionne bien pour moi :

app.run(function (rootScope) {
  $rootScope.$on('$viewContentLoaded',function(){
    jQuery('html, body').animate({ scrollTop: 0 }, 200);
  });
});