javascript - sref - ui-router angular 6

Ui-router angular desplazarse hacia arriba, no a la vista

Question

Acabo de actualizar a ui-router 0.2.8 desde 0.2.0 y me he dado cuenta de que cuando el estado cambia, la posición de desplazamiento salta a la parte superior de la ui-view de 0.2.0 de te que es el tema del nuevo estado.

Esto está bien, pero tengo dos problemas con esto:

1) Tengo 30px relleno entre la parte superior de la página y el ui-view y me gustaría que se desplace hasta la parte superior de la página, dejando un espacio. Por el momento, va exactamente a la parte superior de la ui-view que se ve feo. Para lograr esto, creo que o bien necesito saber cómo desplazarme a la parte superior del div en el que está la vista de $uiViewScroll (no la viewport del navegador), o necesito saber cómo anular $uiViewScroll para desplazarme a el ui-view menos 30px.

He intentado $uiViewScrollProvider.useAnchorScroll(); pero si lo hago, no se desplaza en absoluto. También probé <ui-view autoscroll="false">; , que también detiene el desplazamiento por completo.

2) En realidad, no se desplaza en el momento, simplemente salta. ¿Se supone que debe desplazarse o le corresponde al desarrollador hacer esto con las transiciones de CSS?

Cualquier ayuda sería realmente apreciada :)

Answer 1

1) Creo que es la manera más fácil de poner autoscroll="false" en el ui-view y manipular el desplazamiento en el evento $viewContentLoaded .

2) Este es el comportamiento predeterminado del navegador en las anclas

Answer 2

Colocar encima

<div id="top">.....

Código para desplazarse:

$rootScope.$on(''$stateChangeStart'', function() {
    $anchorScroll(''top'');
});

Answer 3

Como $stateChangeSuccess parece no estar disponible más en AngularJS actual (como 1.2.x) cambié el ejemplo de Rishul Mattas a lo siguiente que funciona bien para mí:

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

Answer 4

Creo que no necesitamos desplazarnos hacia arriba si el estado de navegación es secundario, así que escribí esto:

$rootScope.$on(''$stateChangeSuccess'',function(_, _, _, os){
    if(!$state.includes(os) || $state.is(os))
        $("html, body").animate({ scrollTop: 0 }, 200);
});

Answer 5

Entonces tuve el mismo problema. Tengo una barra de navegación fija. Si pongo autoscroll = "true" en la vista de ui, se desplazará hacia la parte superior menos la altura de la altura de la barra de desplazamiento.

Así que me deshice del estilo que agregaba el relleno al cuerpo para la barra de navegación superior

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

Y lo apliqué a la interfaz de usuario

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

Ahora autoscroll = "true" funciona como se esperaba.

Answer 6

La mayoría de las veces no es suficiente simplemente desplazarse hacia la parte superior de la página. Siempre es una buena idea respetar los enlaces de anclaje y desplazarse al lugar específico en el contenido cargado designado por el hash de la ubicación.

Aquí está el código que uso para implementar esta estrategia:

module.run(function (
  $rootScope,
  $timeout,
  $location,
  $uiViewScroll
) {

  // Scrolling when screen changed.
  $rootScope.$on(''$viewContentLoaded'', function () {
    $timeout(performAutoScroll, 0);
  });


  function performAutoScroll () {
    var hash = $location.hash();
    var element =
         findDomElement(''#'' + hash)
      || findDomElement(''a[name="'' + hash + ''"]'')
      || angular.element(window.document.body)
    ;
    $uiViewScroll(element);
  }
});

$viewContentLoaded es un evento generado por Angular cuando el contenido se carga dentro del elemento ui-view . En realidad, tenemos que posponer la ejecución de nuestro código para pasarlo a un siguiente ciclo de resumen. De esta forma, el contenido del elemento de la vista se colocará realmente en el árbol DOM, para que podamos consultarlo. $timeout con truco de retraso cero se utiliza para este propósito.

$uiViewScroll servicio $uiViewScroll , proporcionado por UI Router, se usa para realizar el desplazamiento. Podemos pasarle un elemento jQuery / jqLite y se desplazará a su borde superior.

Estamos obteniendo el hash currect del servicio $location y usándolo para encontrar el elemento apropiado dentro del árbol DOM. Podría ser un elemento con un atributo id o un enlace con un atributo de name . En caso de que no podamos encontrar un elemento para desplazarnos hacia atrás, volveremos a un elemento del body (es decir, nos desplazaremos hacia la parte superior de la página).

Y el findDomElement es solo un azúcar sintáctico. Se definió así:

/**
 * @param {string} selector
 * @returns {jQuery|null}
 */
function findDomElement (selector) {
  var result = $(selector);
  return (result.length > 0 ? result : null);
}

Espero que este enfoque tenga sentido y sea útil para alguien allá afuera. ¡Aclamaciones!

Answer 7

Otro enfoque es decorar el servicio predeterminado $uiViewScroll , anulando de manera efectiva el comportamiento predeterminado.

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...
    }; 
  });
});

Y como Hubrus mencionó, para cualquier <ui-view> que no desee que solicite, simplemente agregue autoscroll="false" . No he echado un buen vistazo a la implementación de desplazamiento real, simplemente pensé que mencionaría la forma de decorador (es muy divertido) como una alternativa. Estoy seguro de que puedes calcular el comportamiento de desplazamiento exacto.

Answer 8

Si desea hacer esto con vistas condicionalmente, puede colocar esto en la vista del controlador de esta manera:

.state(''exampleState'', {
    url: ''/exampleURL'',
    controller: ''ExampleCtrl as examplectrl'',
    onEnter: function($rootScope) {
            $rootScope.$on(''$viewContentLoaded'',function(){
            jQuery(''html, body'').animate({ scrollTop: 0 }, 200);
        });
    }
}).

u opcionalmente, lo que podría mantener su limpiador de archivos state.js coloque lo anterior en el controlador para la vista dada:

function ExampleCtrl ($scope, $rootScope) {

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

Espero que esto ayude a alguien, por favor avíseme si me falta algo. Usé el último y funciona muy bien para mí.

Answer 9

Si uno combina Angular + Diseño de materiales, esto también es necesario para desplazarse hacia arriba:

app.run(function ($rootScope) {
    $rootScope.$on(''$viewContentLoaded'', function () {
        $("md-content").animate({ scrollTop: 0 }, "fast"); /* <------- Notice this line */
        jQuery(''html, body'').animate({ scrollTop: 0 }, 200);
    });
});

Answer 10

cuando la ruta cambia, el enrutador transmite un evento: $ stateChangeSuccess, es decir, la url ha cambiado, así que simplemente escúchala y usa jquery para desplazarte a la parte superior de la página.

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

coloque el código de arriba dentro

yourAppName.run(function(){

    //the above code here
 })