ユーザーがページの特定の場所にいるかどうかを確認します

Question

複数のアコーディオングループを持つAngularアプリケーションがあります。デフォルトでは閉じられます。 1つのセクションがかなり大きいので、開くときに、セクションの最後を見たい場合はスクロールダウンする必要があります。このセクションにはいくつかの計算があります。問題は、セクションの上部に計算ボタンがあるため、ユーザーが再計算したいときに、ボタンを表示するために再び上にスクロールする必要があることです。

ユーザーが特定の場所に移動したときにその場所を取得する可能性があるため、オーバーレイボタンでng-ifがトリガーされます。

おかげで、 ブレント

Answer 1

はい、これは、それはあなたがあなたの目標を達成するのを助けるでしょうMozillaの上this記事を読んでみてくださいJavaScriptで実現することができるが、基本的にそれはあなたがクライアント上のマウスの位置を知ることができます。これとは別に、ページ内にカーソルがあるかどうかを知る必要がある特定の要素がある場合、Jquery and mouseenter eventを使用して何らかのアクションをトリガーすることができます。

Answer 2

あなたはjQueryのの.scrollを（）を使用することができ、それは次のようになります。

var app = angular.module('myApp', []); 
 
    app.controller('myCtrl', function($scope, $document) { 
 
     $scope.pos = { 
 
     scrollPos:0 
 
     }; 
 
     
 
     $("#outer").scroll(function() { 
 
     $scope.pos.scrollPos = $("#outer").scrollTop().valueOf(); 
 
     $scope.$apply(); 
 
     }); 
 
    });

#outer { 
 
    overflow: auto; 
 
    height: 250px; 
 
    width: 200px; 
 
    border: solid 1px #ccc; 
 
} 
 

 
.inner { 
 
    height: 1000px; 
 
    position: relative; 
 
    width: 198px; 
 
} 
 

 
.top { 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    bottom: 0px; 
 
} 
 

 
.scrolled { 
 
    position: fixed; 
 
    top: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    {{pos.scrollPos}}<br> 
 
    <div id="outer"> 
 
    <div class="inner"> 
 
     <div class="scrolled ng-hide" ng-show="pos.scrollPos > 50">Passed Point.</div> 
 
     <div class="top">Top</div> 
 
     <div class="bottom">Bottom</div> 
 
    </div> 
 
    </div> 
 
</div>