mootools_使用MooTools ScrollSpy滚动“同意条款”组件

最新推荐文章于 2024-11-04 07:45:03 发布

culuo8053

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量127

点赞数

文章标签： css js html jquery web ViewUI

原文链接：https://davidwalsh.name/scrollspy-terms

版权

mootools

Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done it.

还记得Windows应用程序的美好时光，它迫使您向下滚动到“条款和条件”窗格的底部，从理论上确保您确实阅读了它们吗？您说的是“不，大卫，不要这样做。” 为时已晚-我已经做到了。

View Demo 查看演示 Download ScrollSpy 下载ScrollSpy

HTML (The HTML)


<form method="post">
	<div id="terms-pane">
		<h2>Terms & Conditions</h2>
		<p>Pellentesque habitant morbi tristique senectus...</p>
		<p>Pellentesque habitant morbi tristique senectus...</p>
		<!-- many more... -->
	</div>
	<input type="submit" name="submit" id="submit" value="Submit" />
</form>

The scrolling area must be wrapped with a DIV.

滚动区域必须用DIV包裹。

CSS (The CSS)


	#terms-pane	{ width:800px; height:200px; overflow:scroll; border:1px solid #ccc; background:#eee; margin:5px 0; padding:10px 20px; }

The aforementioned DIV should have an explicit height and the overflow set to scroll.

前面提到的DIV应该有一个明确的高度，并且溢出应设置为滚动。

MooTools JavaScript (The MooTools JavaScript)


window.addEvent('domready',function() {
	//disable submit
	var submit = $('submit');
	submit.disabled = true;
	//scrollspy
	var div = $('terms-pane'), height = div.getScrollSize().y;
	var spy = new ScrollSpy({
		container: div,
		min: div.getScrollSize().y - div.getSize().y, //tolerance
		onEnter: function() {
			submit.disabled = false;
		}
	});
});

We start out by disabling the submit button. Then we calculate both the height and the scroll height of the DIV, subtracting one from the other to get the allowance range of the scrolling area. When the user scrolls down there, ScrollSpy fires the enter event and we know the user has hit the bottom!

我们首先禁用提交按钮。然后，我们计算DIV的高度和滚动高度，将它们彼此相减，得到滚动区域的允许范围。当用户向下滚动时，ScrollSpy触发enter事件，我们知道用户已经触底！

View Demo 查看演示 Download ScrollSpy 下载ScrollSpy

I used to hate these things when they were included in Windows application installs. If you want this type of effect though, here it is.

当它们包含在Windows应用程序安装中时，我曾经讨厌这些东西。如果您想要这种效果，就在这里。