2016-02-27 5 views
6

Ich habe ng-view animiert. Ich verwende Slide-up-Animation, die absolute Position der Elemente erfordert und auch overflow-x: hidden, um den Inhalt zu schneiden. In einer Unterseite muss ich scrollTo Element Funktionalität verwenden, aber es funktioniert nicht, wenn beide 2 Werte angegeben sind. ist hier ein Haupt ng-view Klasse, die für die korrekte AnimationenKann nicht zum Element scrollen, wenn absolute Position und Überlauf-x ausgeblendet sind.

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

und Struktur erforderlich ist:

<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> 

I plnkr vorbereitet leicht zu zeigen, wie es wie jetzt aussieht. Gibt es eine andere Möglichkeit, Scroll-Arbeiten zu erreichen, aber mit diesen beiden Werten?

+2

Dies scheint ein angularjs Bug. Das native '.scrollIntoView ({behavior: 'smooth'})' funktioniert ordnungsgemäß. – Oriol

Antwort

2

Hier Höhe: 100% in der Wrapper CSS-Klasse schafft ein Problem. Bitte verwenden Sie die Wrapper-CSS-Klasse unten.

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

Es funktioniert wirklich, hmm wissen Sie, warum diese Höheneigenschaft das Problem verursacht? Vielen Dank – kxyz

Verwandte Themen