Angular JS不會觸發滾動事件

我已經開始用Angular 1.5.x構建我的第一個項目。到現在爲止還挺好。Angular JS不會觸發滾動事件

但是，我最近一直在嘗試做一些超級簡單的事情，並在滾動時記錄窗口位置/事件。我已經嘗試過各種方法，如指令，綁定事件，jquery，並且沒有任何東西似乎在控制檯中記錄。

通常以原始的JavaScript我會做一些簡單的如：

window.onscroll = function (e) { 
    console.log(e); 
}

我嘗試更新的代碼看起來像這樣在我的控制器：

angular.element($window).on('scroll', function (e) { 
    console.log(e); 
});

它什麼都不做。如果我將事件更改爲點擊或調整大小，它會作出響應。但滾動什麼都不做。這真是令人沮喪。

我試過使用指令，我已經有了相同的結果。沒有。

Angular似乎刪除滾動事件或在某種程度上覆蓋它。我希望有一個明顯的解決方案或者我需要做的另一個屬性或方法。

非常感謝您花時間研究我的問題。

我非常感謝任何人可以提供的幫助和建議。

來源

2016-11-08 Liam Chapman

你嘗試過使用'.bind'，而不是'.on'？ – Lifehack

是的，我有。似乎沒有做任何事情。 –

如果我將事件更改爲其他任何內容，如「點擊」。有用。看起來'滾動'根本沒有響應。真奇怪。 –

看看這裏http://plnkr.co/edit/FL06BgnmOpgVXNecB3mB?p=preview。滾動瀏覽HTML頁面並打開您的控制檯，您將看到正在打印的一些輸出。注意在script.js中$ window是一個依賴注入。

app.directive("scroll", function ($window) { 
    return function(scope, element, attrs) { 
    angular.element($window).bind("scroll", function(e) { 
     console.log(e); 
     console.log(this.pageYOffset); 
     scope.$apply(); 
    }); 
    }; 
});

來源

2016-11-08 19:04:12 zee

嗨@zee，謝謝你幫助我。我試過你的例子，它的工作原理。但是，當我將其傳輸到我的應用程序時，它不會觸發滾動事件。我只能認爲在我的代碼中存在一些衝突。但我不確定是什麼。我覺得奇怪的是，當我切換「滾動」到「點擊」時，它會觸發該事件，但不會滾動。 –

後更多的修補程序。我終於有了迴應。我給了一個硬編碼的css height值爲5000px的元素，現在它正在記錄事件。所以看起來角度沒有達到窗口高度。我猜這是使用動態模板/路線的事情，它在頁面高度有限之前綁定滾動事件？我不知道這是一個錯誤還是角度典型？ –

哦，我很傻。我的身體標記在我的CSS中的高度爲100％。所以我假設我的JS會認爲沒有必要滾動。希望這可以幫助別人解決類似的問題。再次感謝@zee和其他花時間幫助的人。 –

如果你想在控制器的使用有可能是這樣的：

Plnkr example

app = angular.module('app', []) 
    .controller('scrollCtrl', function($scope, $document, $window) { 
    ctrl = this; 
    ctrl.pos = 0; 

    //Scroll function 
    ctrl.onScroll = function() { 
    $scope.$apply(function(){ 
     ctrl.pos = $window.scrollY; 
    }); 
    } 

    //Bind current this to function 
    ctrl.onScroll = ctrl.onScroll.bind(ctrl); 

    //Event 
    $document.on('scroll', ctrl.onScroll); 

    //Easy to unsubscribe from event: 
    $scope.on('destroy', function() { 
    $document.off('scroll', ctrl.onScroll); 
    }); 
})

來源

2017-02-13 15:41:59

Angular JS不會觸發滾動事件

回答

相關問題