2016-02-27 37 views
6

ng-view animasyonlu öğeye kaydırılamıyor. İçeriği kesmek için öğelerin mutlak konumunu ve ayrıca overflow-x: hidden'u gerektiren slayt animasyonu kullanıyorum. Bir alt sayfada scrollTo elemanının işlevselliğini kullanmam gerekiyor, ancak 2 değerinin belirtilmesi işe yaramıyor. şimdilik benziyor nasıl kolaylıkla Konum mutlak ve taşma-x gizli belirtilmişse

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

Ben plnkr hazırlanan: İşte doğru animasyonlar

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

Ve yapısı için gerekli olan bir ana ng-view sınıftır. Kaydırma çalışmasını gerçekleştirmenin başka bir yolu var mı, ancak bu iki değerle mi?

+2

Bu bir angularjs hatası gibi görünüyor. Yerel .scrollIntoView ({behavior: 'smooth'}) 'düzgün çalışıyor. – Oriol

cevap

2

Burada, yükseklik: sarıcıda% 100 CSS sınıfı bir sorun oluşturur. Lütfen aşağıdaki sarıcı CSS sınıfını kullanın.

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

Gerçekten çalışıyor, bu yükseklik özelliğinin neden sorun yarattığını biliyor musunuz? teşekkür ederim – kxyz

İlgili konular