client/offset/scroll家族 Offset 家族

Client家族:

　　clientWidth 和 clientHeight :检测盒子的大小,计算方式:自身宽高 + padding,内容溢出不算,滚动条宽度(默认17)不算

　　clientTop 和 clientLeft :只读属性,表示元素内容区域与元素的左上边距.    内容区域 = 内容 + padding, padding之外就剩border,所以这两个属性实际指的是元素上左边框的宽度.

　　获取浏览器可视区域的宽高: document.documentElement.clientWidth/clientHeight 获取浏览器可视区域的宽高,没有ie兼容问题

scroll家族

scrollWidth 和 scrollHeight :检测盒子的大小,ele.scrollWidth/Height = 元素的宽高 + padding. 如果元素有超出, 显示超出内容的大小加上padding

注意:假设元素内容超出盒子大小,盒子有padding属性

　　1.有overflow:auto/hidden/scroll属性,则元素宽度=内容宽度  + 左padding值, 元素高度 = 内容高度 + 上下padding值

　　2.没有overflow: auto/hidden/scroll属性 , 则元素宽度= 内容宽度+ 左padding值, 元素高度 = 内容高度+ 上padding 值

-------------------------开始划水----------------------------

获取页面卷入高度的浏览器兼容问题：

• 对于没有 doctype 声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop 高度 ； 对于有 doctype 声明的页面则可以使用 document.documentElement.scrollTop ；

• window.pageYOffset/pageXOffset IE9 以上支持

兼容写法： var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop var scrollLeft = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft

onscroll 事件

解释：当元素的滚动条滚动时触发的事件。

onscroll 事件貌似任何实体元素都可以绑定，这里的实体元素包括DOM元素、window元素、document元素。

用法即：element.onscroll=function(){};

需要注意的是,设置此事件的元素一定要有滚动条

window滚动的方法

window.scroll(x,y)是让window滚动条滚动到那个x,y坐标。//x是水平坐标，y是垂直坐标。

window.scrollBy(-x,-y)是让window滚动条相对滚动到某个坐标，- 10即相对向左/向上滚动10像素。

window.scrollTo(x,y)效果和window.scroll(x,y)一样， 不兼容IE。

element.scrollIntoView(boolean) 让元素贴顶或者贴底，相对于可视区域 (实验属性，慎用)

实现网页顺滑滚动（smooth scroll）的原生方式：

1. html { scroll-behavior: smooth; }

2. window.scroll 方法传对象参数

   window.scroll(options);
   window.scrollTo(options);
   window.scrollBy(options);

   options 是一个包含三个属性的对象：

   1. top 是文档中的纵轴坐标

   2. left 是文档中的横轴坐标

   3. behavior 类型 String，表示滚动行为，支持参数 smooth(平滑滚动)，instant(瞬间滚动),默认值 auto，实测效果等同于 instant

3. elem.scrollIntoView(options) IE 不支持填写 options 选项

   options 是一个包含三个属性的对象：

• behavior 可选

  定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。

• block 可选

  定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。

• inline 可选

  定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

家族成员： offsetWidth offsetHeight offsetLeft offsetTop offsetParent

offsetWidth 和 offsetHeight

检测盒子自身大小

offset宽/高 = 盒子自身的宽/高(width/height) + padding + border

offsetLeft 和 offsetTop

检测距离有定位的父盒子的左/上面的距离，从父盒子 的 padding 开始算，父盒子的 border 不算

如果父级元素都没有定位则以 body 为准

offsetParent

返回距离该对象最近的带有定位的父盒子节点

如果当前元素的父级元素没有进行 CSS 定位（absolute、relative、fixed） 此元素的 offsetParent 为 body