2016-02-27 4 views
6

「情報に同意する」というページのフォームを検証しようとしています。ここで、ユーザはスクロールせずに続行/同意ボタンをクリックすると、前方に移動するためにスクロールする必要があります(ボックスの下にチェックボックスがないことを覚えておいて、スクロールが終了するまでスクロールダウンする必要があります) '情報の下にスクロールする必要がある'というdiv要素/エラーを表示する必要があります(アンカーリンクである必要があります。クリックすると色付きのボックスが強調表示されます)。ここでは、コードおよび画像anglejsを使用してスクロールしないときにフォームを検証する方法は?

(function(){ 
    angular 
     .module('agreeToInfoApp',[]) 
     .directive('execOnScrollOnBottom', [function() { 
      return { 
       restrict: 'A', 
       link: function (scope, elem, attrs) { 
        var fn=scope.$eval(attrs.execOnScrollOnBottom), 
         clientHeight=elem[0].clientHeight; 
        elem.on('scroll',function(e){ 
         var el=e.target; 
         if ((el.scrollHeight-el.scrollTop) === clientHeight) { 
          elem.addClass('class-summary') 
          scope.$apply(fn); 
         }; 
        }); 
       } 
      }; 
     }]); 
})(); 

HTMLです:

<body> 
<div class="class-summary"> 
    <div class="open"> 
     <p>Some Information Missing</p> 
     <ul> 
      <li>Please scroll down to lookup the information</li> 
     </ul> 
    </div> 
</div> 
<form name="myform" > 
    <div cols="3" exec-on-scroll-on-bottom name="agreeTerms" class="agree-terms" > 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
     <p>adsfadfad</p> 
    </div><br> 
    <input type="submit" value="Continue" > 
</form> 
<script type="text/javascript" src="../../lib/angular.js"></script> 
<script type="text/javascript" src="app.js"></script> 

は私が私がここで行方不明ですか、他の方法が何であるかを教えてください?

Agree To Information Page

答えて

0

あなたの条件は、ほんの少しの微調整が必​​要であり、それが行ってもいいです。

if (el.scrollTop === el.scrollHeight - el.offsetHeight) { 
    // scrolled to bottom 
} 

JSFiddleデモ:http://jsfiddle.net/030d6pb0/

関連する問題