cssom view module

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%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/

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

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