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

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

有什么建议吗？

来源

2010-11-01 Xtian

你能澄清“开/关”的功能？您是否打开/关闭用户到达ToA结尾后提交表单的能力？ – shoebox639 2010-11-01 22:46:09

当用户点击锚时，它会运行showDialog（），我想只有当用户滚动到T＆C的底部时才可以使用该选项。 – Xtian 2010-11-01 22:49:21

div（）的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'); 
}

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

我们不使用onclick HTML属性，而是以编程方式使用bind和unbind绑定事件处理程序。这可以让我们根据用户是否滚动或不滚动来做出不同的事情。
jQuery提供scroll方法来注册一个函数，以便在用户滚动div时运行。我们检查scrollTop和height的总和与div内的内容的高度，如果没有问题，我们解除绑定原来的处理器并绑定一个新处理器。
我们强调说明（如果用户还没有向下滚动，但仍然点击锚点）以便使用。如果用户点击并发现什么都没有发生，他会认为注册表不起作用，会离开您的网站，并留下不好的经历。

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

来源

2010-11-02 00:36:01 PleaseStand

为什么div #terms上的填充设置导致它不能在IE中工作？ – Xtian 2010-11-05 14:29:21

您需要检查<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的高度+上的滚动事件，然后启用/禁用取决于scrollHeight属性是否已经达到了锚。

来源

2010-11-01 23:10:05 Michal

> =？额外的字符.... – bevacqua 2010-11-02 01:05:00

我注意到，这个特殊的代码不会让用户向下滚动，向上滚动（甚至略微），然后点击链接。这可能是一个可用性问题。 – PleaseStand 2010-11-02 20:46:14

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

回答

相关问题