当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。
需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束。
onscroll 实例
下面的例子演示了一个极普遍的应用：利用 onscroll 事件检测滚动条位置，当向下滚动到一定位置时，在页面右下角会出现“返回顶部”的锚链接，以方便网站用户快速返回顶部。
html:
<style type="text/css">
#top_div { position:fixed; bottom:80px; right:0; display:none; }
</style>
//------------------------------------------------------
<a name="top">顶部</a>
<div id="top_div">
<a href="#top">返回顶部</a>
</div>
<br />
<br />
//.....此处省略很多<br>
javascript:
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "top_div" );
if( t >= 300 ) {
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
}
}
语法解释:
- 在<style>标签中首先定义 top_div css 属性：position:fixed;display:none; 是关键。
- javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑。
- 当滚动超过 300 (像素) 时，将 top_div css display 属性设置为显示(inline)，反之则隐藏(none)。
