Aurelia rouleau dactylographié en haut de la page

Question

Comment faire défiler la page haut élément supérieur ou div/id?

Méthode viewmodel (.ts) appelés par click.delegate de la page de défilement de la vue (.html) en haut ou sélectionnables div id par etc. En utilisant la fenêtre? si, comment injecter une fenêtre dans aurelia/tapuscrit?

Answer 1

Je ne suis complètement votre question, cependant, voici comment je défiler en haut de la page sur chaque navigation. Peut-être que cela vous aide.

J'ai une fonction de défilement (smoothScrollReset) qui obtient un élément (peut être tous les éléments) et défile à cet élément basé sur une fonction donnée (par exemple linearTween(), vous pouvez modifier le comportement de défilement en échangeant celui-ci). L'élément que je défile est un conteneur sur la page. Ensuite, j'ajoute un pas de pipeline de rendu de post au routeur Aurelia. Tous ensemble:

Ajout de l'étape de pipeline:

... 
let appRouterConfig = config => { 
    config.addPipelineStep('postRender', ScrollToTopStep); 
}; 

this.router.configure(appRouterConfig); 
... 

L'étape de pipeline lui-même:

La fonction de défilement:

export function smoothScrollReset(element) { 
    if (!element) { 
    return; 
    } 

    const duration = 200; 
    const scrollFrom = element.scrollTop; 
    const diff = -scrollFrom; 
    let startTime = null; 
    let lastYOffset; 
    let scrollLoop = (currentTime) => { 
    let currentYOffset = element.scrollTop; 
    if (!startTime) { 
     startTime = currentTime - 1; 
    } 

    const timeElapsed = currentTime - startTime; 
    if (lastYOffset) { 
     if ((diff > 0 && lastYOffset > currentYOffset) || 
     (diff < 0 && lastYOffset < currentYOffset)) { 
     return; 
     } 
    } 

    lastYOffset = currentYOffset; 
    element.scrollTop = linearTween(timeElapsed, scrollFrom, diff, duration); 
    if (timeElapsed < duration) { 
     window.requestAnimationFrame(scrollLoop); 
    } else { 
     element.scrollTop = 0; 
    } 
    }; 

    window.requestAnimationFrame(scrollLoop); 
} 

function linearTween(t, b, c, d) { 
    return c * t/d + b; 
}