Question

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

<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（scrollTop）的#terms是可视区域顶部的距离。 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');
}

有几点需要注意。

我们不使用onclick HTML属性，而是使用bind和unbind以编程方式绑定事件处理程序。这允许我们根据用户是否向下滚动来做出不同的事情。
jQuery提供scroll方法来注册每当用户滚动div时运行的函数。我们检查scrollTop和height的总和与div内部内容的高度，如果可以，我们取消绑定原始click处理程序并绑定一个新处理程序。
我们突出显示说明（如果用户尚未向下滚动，但仍然点击了锚点）以获得可用性。如果用户点击并发现没有任何反应，他会认为注册表单不起作用，会离开您的网站，并留下糟糕的体验。

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

Answer 2

您需要检查<div>的scrollTop + height是否等于scrollHeight。

使用jQuery：

$('a').click(function(){
    var myDiv = $('div')
    if (myDiv.scrollTop() + myDiv.height() == myDiv.get(0).scrollHeight)
    {
        showDialog();
    }
    else
    {
        return false;
    }
});

您还可以在滚动事件上检查<div>的scrollTop + height，然后根据是否已达到scrollHeight来启用/禁用锚点。

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

2 个答案: