2016-02-27 6 views
6

Ho animato ng-view. Sto usando l'animazione slide-up, che richiede la posizione assoluta degli elementi e anche overflow-x: hidden per ritagliare il contenuto. In una sotto-pagina devo usare la funzionalità dell'elemento scrollTo, ma non funziona se sono specificati entrambi i valori. Qui è un principale ng-view di classe che è richiesto per le animazioni corretteImpossibile scorrere fino all'elemento se posizione assoluta e overflow-x nascosto specificato

.wrapper { 
    position: absolute !important; 
    left: 0; 
    top: 0; 
    height: 100%; 
    min-height: 100%; 
    min-width: 100%; 
    overflow-x: hidden; 
    } 

e struttura:

<div class="wrapper ng-view-div"> 
<nav> 
     <ul> 
      <li><a href du-smooth-scroll="section-1" du-scrollspy>Section 1</a></li> 
      <li><a href du-smooth-scroll="section-2" du-scrollspy>Section 2</a></li> 
      <li><a href du-smooth-scroll="section-3" du-scrollspy>Section 3</a></li> 
     </ul> 
    </nav> 

<section id="section-1" style="background-color: red"> 
    C 
</section> 
<section id="section-2" style="background-color: blue"> 
    C 
</section> 
<section id="section-3" style="background-color: green"> 
    C 
</section> 
</div> 

ho preparato plnkr per mostrare facilmente come sembra per ora. C'è un altro modo per ottenere lo scroll working ma con questi due valori?

+2

Questo sembra un bug angularjs. Il .scrollIntoView nativo ({behavior: 'smooth'}) 'funziona correttamente. – Oriol

risposta

2

Qui, altezza: 100% nel wrapper La classe CSS crea un problema. Si prega di utilizzare la classe CSS wrapper qui sotto.

.wrapper { 
    position: absolute !important; 
    left: 0; 
    top: 0; 
    min-height: 100%; 
    min-width: 100%; 
    overflow-x: hidden; 
} 
+0

Funziona davvero, hmm sai perché questa proprietà di altezza causa il problema? Grazie – kxyz

Problemi correlati