W3C出炉了CSS Object Model View草案。CSSOM视图模块(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。

简单来说,CSSOM全称CSS对象模型,涉及两部分内容,第一部分和操作样式表相关,第二部分和元素尺寸相关。

window view properties

innerWidth -- innerHeight

outerWidth -- outerHeight

screenX -- screenY

pageXOffset -- pageYOffset

screen view properties

availWidth -- availHeight

colorDepth  ( different in broswer)

pixelDepth

width -- height[/css]

DocumentView and ElementView methods

[css]elementFromPoint()
getBoundingClientRect()   值得使用
getClientRects()
scrollIntoView()  可用来替换锚点

ElementView properties

clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight

扩展与兼容

chrome兼容:body

document.body.scrollTop ---- document.documentElement.scrollTop

扩展使用时的节点: 是body 还是 某个节点NODE 还是相对于父元素,是有区别的。

Mouse position

clientX,clientY
offsetX, offsetY
pageX, pageY
screenX, screenY
x, y

简单的滚动脚本

var defaults = {
    scrollTo: "scroll", // string || number
    speed:16,
    bton:"move",
}

var a = document.getElementById(defaults.scrollTo).offsetTop;
console.log(a);
var but = document.getElementById(defaults.bton);
var timer = null;

but.onclick = function() {
    timer = setInterval(function() {
    var y = document.body.scrollTop || document.documentElement.scrollTop; // window.pageYOffset 也行
    var x = Math.ceil((a-y)/10);
//y = 500; // 不能使用变量名来改变值
    console.log(a-y,x);
    document.body.scrollTop +=x; // 滚动停止时因为X 为0了,不一定是清除interval
    document.documentElement.scrollTop +=x; // 这两个兼容处理直接这样写,反正也不相互影响。也
//因为只能这样直接改变才能真实的改变值。
    console.log(document.body.scrollHeight - y,window.innerHeight) // 参考FF,不一定相等,所以下面用<=来做判断
    if( a >= document.body.scrollHeight - window.innerHeight) { // 解决定位在底部时的无限滚动
    console.log("judge one completed");
    if (document.body.scrollHeight - y <= window.innerHeight) {
    console.log("here is the bottom");
    window.clearInterval(timer);
    }
    }
    if( x == 0 || x==1 || x==-1) {
// 判断两者的差距就好了,这个版本应该是最好的了.还有是X的大小的兼容,处理出来的数据
// 为了浏览器全兼容,最好就有0,1
    console.log("here is the position");
    window.clearInterval(timer);
    console.log("x == 0 ok")
    }
  },defaults.speed)
};

参考连接:

http://www.zhangxinxu.com/wordpress/2011/09/cssom视图模式cssom-view-module相关整理与介绍/

http://www.quirksmode.org/mobile/tableViewport_desktop.html

http://www.quirksmode.org/dom/w3c_cssom.html