檢測頁面滾動/電流部分中AngularJs正在觀看

我的頁面被劃分爲幾個部分：＃頁面-1和＃頁-2檢測頁面滾動/電流部分中AngularJs正在觀看

見Plnkr：http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi

<body> 
    <section id="page-1"> 
     This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2. 
    </section> 

    <section id="page-2"> 
     <span class="animated bounce">This is page 2 </span>  
    </section> 
</body>

動畫類被施加到＃page-2中的不同元素。然而，當用戶向下滾動到這些元素時，動畫已經完成。因此，它們看起來像靜態對象。

有無論如何，我可以檢測當＃頁-2目前正在查看，然後調用函數addClass（'動畫反彈'）某些元素？

我想在angularjs如果可能的話

來源

2015-02-05 runtimeZero

實現這一點，我已經找到了angularjs指令，可能是在這種情況下有幫助你。 Inview嘗試通過向您報告是否在屏幕上顯示dom元素來解決此確切問題。不幸的是，我一直無法測試我的解決辦法，因爲我無法找到Inview的縮小js文件，但我組裝一些代碼，應該工作：

<section id="page-2" in-view="{$inview ? isFocused=true;}"> 

    <div ng-class="{'animated bounce': isFocused}">This is page 2 </div> 

</section>

的$inview應該是真實的，只要該元素是可見在瀏覽器中。這導致範圍變量isFocused被設置爲true，因此動畫類被添加到您的div。

這應該按照您在問題中的意圖工作，如果由於某種原因無法正常工作，請讓我知道，以便我可以改進我的答案。

來源

2015-02-05 15:29:55 Bricktop

檢測頁面滾動/電流部分中AngularJs正在觀看

回答

相關問題