Question

我正在尝试验证名为“同意信息”的页面的表单。在这里，用户必须向下滚动才能向前移动（请记住框底部没有复选框，而是用户必须一直向下滚动直到滚动结束），如果用户单击“继续/同意”按钮而不滚动，必须显示一个div元素/错误，说“需要滚动到信息的底部”（必须是锚链接，点击它应该突出显示带有颜色的框）。这是代码和图像

 (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

Answer 1

你的病情只需要稍微调整一下就可以了。

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

JSFiddle演示：http://jsfiddle.net/030d6pb0/

如何在不使用angularjs向下滚动时验证表单？

1 个答案: