控制窗口内容滚动算是一个较少使用到的 JavaScript 窗口功能,不过这一点可能会随着可滚动图层内容的到来而有所改变。这个技巧将教你如何实现内容滚动功能。
这段代码很简单。让我们先看看向下滚动功能所使用的函数。
var y = 0;
var when = null;
varps = parent.scrollee;
functionscrollMe() {
if (document.all && y < ps.document.body.scrollHeight || y < ps.document.height)
{
ps.scroll(0,y);
y = y + 4;
when = setTimeout('scrollMe()',1);
}
}
scrollMe() 函数首先检查浏览器是否支持document.all属性(只有 IE 浏览器才支持这个属性),然后检查变量 y 的值是否小于scrollHeight属性,这个 IE 专有的属性包含整个 HTML 页面所能滚动的总高度(以像素为单位)。另一方面,如果浏览器不支持document.all属性(Communicator 浏览器就不支持),该函数便会检查变量 y 的值是否小于 document height 属性,这是 Communicator 浏览器专有的属性,它包含的值和 IE 里面的scrollHeight属性是相同的。当前述任一种状况成立的时候,scrollee这个分割窗口便会向下滚动 4 个像素。变量 when 很有效率地让该函数不断每隔一毫秒(千分之一秒)重复向下滚动 4 个像素的距离。最后的结果便是网页内容很流畅地向下滚动。
我曾经在网络上看过一些窗口内容滚动示例,这些示例在我使用document.body.scrollHeight或者document.height的地方改用一个任意的很大的数字来代替。这种做法并不好,因为在这种状况下,当窗口内容滚动到最底端的时候,如果使用者不移动光标的话,那么 y 坐标的值就会持续地继续增加。这样一来当使用者按下向上滚动的箭头按钮的时候,页面内容却还是不会立刻开始往上滚动,因为函数还在继续将窗口内容向下滚动,直到达到程序里面设定的值才会停止。