スクロールの角度変化var

私は$scopeにvarを持っています。スクロールアップしてスクロールダウンするときに、それを減らす必要があります。どうやってやるの？ jsのスクロールを使うべきですか？スクロールの角度変化var

2017-02-19 Cheephs

jsfiddle/plunkerまたは少なくともコードスニペットを提供します。 –

あなたの質問は明らかではないが、私はそれを正しく理解すれば、あなたはスクロール方向に基づいてカウンターを増加/減少します。

それにすることができます方法は次のように「スクロール」（jQueryの）イベントにタップすることである：

angular.element($window).on('scroll', function(event) { 
    // Do something here. 
});

より良いあなたが希望これにカスタムディレクティブを書いて、カスタムイベントを放出して、あなたのことができますあなたのコントローラーでこのイベントを聞き、それに基づいて行動することができます。

注：スクロールイベントをデバウンスすることもできます。

P.S.他人があなたの質問をよりよく理解できるように、コードスニペットまたはjsfiddle/codepenを必ず提供してください。

angular.module('app', []) 
 
    .controller('MainController', function($rootScope, $scope) { 
 
    var changeBy = 5; 
 
    $scope.scrollCounter = 0; 
 

 
    // Tap into custom 'scrollHappened' event. 
 
    $rootScope.$on('scrollHappened', function(event, scrollUpHappened) { 
 

 
     // If the scroll direction is 'down'. 
 
     if (scrollUpHappened) { 
 
     $scope.scrollCounter += changeBy; 
 
     } else { // Scroll direction is 'up'. 
 
     $scope.scrollCounter -= changeBy; 
 
     } 
 
    }); 
 
    }) 
 
    .directive('scrollCounter', function($rootScope, $window) { 
 
    return { 
 
     restrict: 'A', 
 
     link: function() { 
 
     var lastScrollPos = 0; 
 

 
     // Add a scroll event on $window object. 
 
     angular.element($window).on('scroll', function(event) { 
 
     console.log(angular.element(event.target)) 
 
      var scrollPos = angular.element(event.target).scrollTop(); 
 

 
      // Emit custom 'scrollHappened' event. 
 
      $rootScope.$emit('scrollHappened', (scrollPos > lastScrollPos)); 
 

 
      // As all this is happening outside of the angular world 
 
      // wrap the update logic inside $apply, so that update will 
 
      // be visible to the angular. 
 
      $rootScope.$apply(function() { 
 
      lastScrollPos = scrollPos; 
 
      }); 
 
     }); 
 
     } 
 
    } 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 

 
<div data-ng-app="app" data-ng-controller="MainController"> 
 

 
    <div scroll-counter="" style="height: 400px"> 
 
    <span>Current scroll counter = {{ scrollCounter }}</span> 
 
    <br/><br/> 
 
    <span>Current scroll counter = {{ scrollCounter }}</span> 
 
    <br/><br/> 
 
    <span>Current scroll counter = {{ scrollCounter }}</span> 
 
    <br/><br/> 
 
    <span>Current scroll counter = {{ scrollCounter }}</span> 
 
    <br/><br/> 
 
    <span>Current scroll counter = {{ scrollCounter }}</span> 
 
    <br/><br/> 
 
    <span>Current scroll counter = {{ scrollCounter }}</span> 
 
    <br/><br/> 
 
    </div> 
 

 
</div>

出典

2017-02-19 13:23:58 Gaurav

javacript window.scrollToの機能を使用してください。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body { 
 
    width: 5000px; 
 
    height: 5000px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Click the button to scroll</p> 
 

 
<button onclick="scrollWin()">Click me to scroll</button><br><br> 
 

 
<script> 
 
function scrollWin() { 
 
    window.scrollTo(0, 1000); 
 
} 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-02-19 11:01:35

申し訳ありませんが、私は言っていませんでしたが、固定値で増減する必要があります。例えば、 '$ scope.var = 10'と' $ scope.changevalue = 5'を持っていれば、スクロールダウン/アップの結果として15/5を持つ必要があります。 – Cheephs

あなたはそれを投票しましたか？???? –

いいえ、私はしなかった!!!! – Cheephs

スクロールの角度変化var

答えて

関連する問題