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

我有一个有“条款和条件”的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函数，但如果不打开，它将保持关闭状态

---

有什么建议吗？

您需要检查

的scrollTop+高度是否等于scrollHeight

使用jQuery：

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

---

您还可以在scroll事件中检查

的scrollTop+高度，然后根据是否达到scrollHeight启用/禁用锚定。

div（

#terms

）的

scrollTop

位于可查看区域顶部的下方。div的

高度

是用户看到的高度。因此，div的

滚动顶部

加上div的

高度

必须至少等于内部整个服务条款文档的总高度（我们称之为

#termsInner

）

下面是一些HTML代码示例：（注意：您可以在上尝试此功能。）

还有一些JavaScript代码：（这必须是

$（function（）{…}

）格式；因此只有在文档准备好后才能执行。）

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

我们不使用

onclick

HTML属性，而是使用

bind

和

unbind

以编程方式绑定事件处理程序。这使我们能够根据用户是否向下滚动来进行不同的操作

jQuery提供了

scroll

方法来注册一个函数，以便在用户滚动div时运行。我们根据div内内容的高度检查

scrollTop

和

height

的总和，如果没有问题，我们将取消绑定原始

单击
处理程序并绑定一个新的处理程序

我们强调说明（如果用户还没有向下滚动，但无论如何都单击了锚定）的可用性。如果用户点击后发现什么也没发生，他会认为注册表不起作用，会离开你的网站，留下不好的体验

---

编辑：已将其修复为在Internet Explorer上工作。由于IE的工作方式，您不能在div

#terms

本身上设置填充，因此请在

#termsigner

上设置任何填充。

您能否澄清“打开/关闭”函数？你的意思是在用户到达ToA末尾时打开/关闭提交表单的功能吗？当用户单击锚定时，它将运行showDialog（），我只希望当用户滚动到T&C底部时，该选项才可用。我注意到，此特定代码不会让用户向下滚动，而会向上滚动（甚至稍微向上滚动），然后单击链接。这可能是一个可用性问题。为什么按div#terms设置的填充会导致它在IE中不起作用？

<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>

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;
}

// 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');
}