获得网页中滚动条的位置

var txt_main  = document.getElementById(‘scorbar_id’);
txt_main.scrollTop;

———————————————————

一、获得网页中滚动条的位置

页面滚动是Javascript 中最不标准的地方,在各种不同版本的浏览器中,大致有 3 种实现的方法。不过通过谨慎的对象测试,我们可以期望获得可靠的一致性,在这里推荐给大家一个函数;

function getScrollingPosition( ) {
    var position = [0,0];
    if (
typeof window.pageYOffset != ‘undefined’) {
       position = [ window.pageXOffset, window.pageYOffset];
    } else if (
typeof document.documentElement.scrollTop != ‘undefined’ && document.documentElement.scrollTop > 0) {
          position = [ document.documentElement.scrollLeft,
document.documentElement.scrollTop];                       
    } else if (typeof document.body.scrollTop != ‘undefined’) {
          position = [ document.body.scrollLeft , document.body.scrollTop];
    }
    return position;
}

这里再介绍一个事件处理函数 window.onscroll

window.onscroll = function () {
    var scrollPos = getScrollingPosition();
    document.title = ‘Left = ‘+scrollPos[0] +’Top = ‘+scrollPos[1];
};

不过,此事件并不可靠,而且用这个事件来驱动非常的低效和缓慢,所以本人不推荐,如果遇到此类似的问题可以使用 setInterval 函数来代替,而不用使用 window.onscroll 参考代码如下:

window.setInterval = function () {
    var scrollPos = getScrollingPosition();
    document.title = ‘Left = ‘+scrollPos[0] +’Top = ‘+scrollPos[1];
};

注意:
●   firefox 以及其他的 MOzilla 浏览器 ,如 Safari 、Kongqueror、Opera等,使用 window.pageYOffset;

● 在标准兼容模式下的 IE 6 使用 document.documentElement.scrollTop;

●   在 Quirks 模式下的 IE 6、IE 5使用 document.body.scrollTop;

上面涉及到 typeof运算符 ,这里着重再提一下;

typeof: 运算符返回一个用来表示表达式的数据类型的字符串。
参数是需要查找类型信息的任意表达式

说明:
typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能: “number,” “string,” “boolean,” “object,” “function,” 和 “undefined.”

经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组.
if(document.mylist.length != “undefined” ) {} 这个用法有误.
正确的是 if( type(document.mylist.length) != “undefined” ) {} 或 if( !isNaN(document.mylist.length) ) {}
typeof的运算数未定义,返回的就是 “undefined”.

运算数为数字 typeof(x) = “number”
字符串 typeof(x) = “string”
布尔值 typeof(x) = “boolean”
对象,数组和null typeof(x) = “object”
函数 typeof(x) = “function”

二、滚动到页面的特定位置

有两种方法可以用于滚动页面(或者窗口和Frame)或者通过滚动的相对坐标(window.scrollBy)来定位,或者是通过滚动到某点的绝对坐标(window.scrollTo)来实现。

window.scrollBy(0,200); //向下滚动200像素
window.scrollBy(200,0); //横向滚动200像素
window.scrollTo(300,200); //滚动到距左边框和上边框300像素和200像素的位置
window.scrollTo(0,0);//滚动到起始处

发表评论

您的电子邮箱地址不会被公开。