javascript - 滚动到底部后打开或关闭功能

Question

我有一个带有“条款和条件”的 div。它是一个垂直滚动的 div。这个想法是一直向下滚动，这将允许用户然后提交(通过点击提交按钮)。但它并不是真正的按钮，而是一个内部带有 javascript 函数的 anchor 。

<a onclick="showDialog();"><img
    name="continue" value="Continue" alt="Continue"
    src="${resource(dir: 'images/buttons', file: 'submit.gif')}"
    border="0" /></a>

所以我需要做的是当用户向下滚动时，它将打开 javascript 功能，但如果没有，它将保持关闭。

有什么建议吗？

Answer 1

div (#terms) 的 scrollTop 是可视区域顶部的下方距离。 div 的 height 是用户看到的高度。因此，div 的 scrollTop 加上 div 的 height 必须至少与里面整个服务条款文档的总高度一样多(我们将调用 #termsInner)。

下面是一些示例 HTML 代码:(注意:您可以在 http://jsfiddle.net/8U7GY/6/ 上尝试。)

<p id="instructions">Please read these terms and conditions  now.
<b>You must scroll to the bottom before  continuing.</b></p>

<div id="terms">
    <div id="termsInner">
        <p>Lorem ipsum...</p>
    </div>
</div>

<span><a id="submit">Register me!</a></span>

一些CSS代码:

p {
    padding: 0.25em;
}

#terms {
    border: solid 1px;
    height: 24em;
    overflow: auto;
    margin-bottom: 1em;
}

#termsInner {
    padding: 0.5em 0;
}

.highlighted {
    background-color: #ff0;
}


#submit {
    color: blue;
    text-decoration: underline;
}

还有一些 JavaScript 代码:(这必须在 $(function() { ... }); 中，以便仅在文档准备好后执行。)

// Select the elements of the HTML page.
var instructions = $('#instructions'),
    terms = $('#terms'),
    termsInner = $('#termsInner'),
    submit = $('#submit');

// Bind an event handler that will run when the user
// has not scrolled through the terms of service.
submit.bind('click', function() {
    // Highlight the instructions.
    instructions.addClass('highlighted');

    // Remove the highlighting after two seconds.
    setTimeout(function() {
        instructions.removeClass('highlighted');
    }, 2000);
});

// Once the user scrolls through, call showDialog instead
// when the user clicks.
terms.scroll(function() {
    if (terms.scrollTop() + terms.height() >= termsInner.height()) {
        submit.unbind('click').bind('click', showDialog);
    }
});

// This is where you would continue the user registration process.
function showDialog() {
    alert('whatever');
}

有几件重要的事情需要注意。

1. 我们不使用 onclick HTML 属性，而是使用 bind 和 unbind 以编程方式绑定(bind)事件处理程序。这使我们能够根据用户是否向下滚动来做出不同的事情。
2. jQuery 提供了 scroll 方法来注册一个函数，以便在用户滚动 div 时运行。我们根据 div 内内容的高度检查 scrollTop 和 height 的总和，如果没问题，我们解除绑定(bind)原始 click处理程序并绑定(bind)一个新的。
3. 我们突出显示说明(如果用户尚未向下滚动但无论如何都单击了 anchor )以提高可用性。如果用户点击后发现没有任何反应，他会认为注册表不起作用，会离开您的网站，并留下糟糕的体验。

编辑:修复它以在 Internet Explorer 上工作。由于 IE 的工作方式，您不能在 div #terms 本身上设置填充，因此请在 #termsInner 上设置任何填充。