JavaScript四大家族之scroll家族

javascript 元素对象拥有scroll家族主要属性：

ScrollTop:　　（被滚动条卷去的头部高度）

ScrollLeft:　　（被滚动条卷曲的左侧距离）

ScrollWidth　　（内容实际宽度：width+padding+超出盒子的宽度）

ScorllHeight　　（内容实际高度：height+padding+超出盒子的高度）

Scroll可通过元素对象的属性ScrollTop和ScrollLeft找到它。

但整个浏览器的滚动条即document的滚动条元素归属存在兼容性问题。

IE678以及其他浏览器认为整个文档对象属于document.documentElement元素的即html。

未声明DTD <!DOCTYPE html> 的浏览器认为文档对象属于document.body元素的。

所以只要找正确元素即可实现浏览器兼容。if(document.CompatMode==CSS1Compat)表示支持document.documentElement元素，else 表示支持document.body元素。

最新浏览器IE9+及其他浏览器都认为整个文档属于Window对象的，可通过Window.pageXOffset和Window.pageYOffset获得，也可以通过Window.scrollTo(x,y)将浏览器滚动条滑动到指定x,y

封装 scroll函数

 1 function scroll(element, vals) {
 2         if (element == null) {
 3             return;
 4         }
 5         if (vals == null) {
 6
 7             return {
 8                 left: element.scrollLeft,
 9                 top: element.scrollTop
10             }
11
12         } else {
13             element.scrollTop = vals.top;
14             element.scrollLeft = vals.left;
15         }
16     }

scroll

转载于:https://www.cnblogs.com/Gxqsd/p/7337254.html

JavaScript四大家族之scroll家族相关推荐

JavaScript四大家族之client家族
javascript 元素对象拥有client家族主要属性: clientHeight: (可见区域高度:height+padding) clientWidth: (可见区域宽度:width+padd ...
28 - JavaScript 特效：scroll家族和缓动动画
缓动动画三个函数缓慢动画里,我们要用到三个函数,这里先列出来: Math.ceil() 向上取整 Math.floor() 向下取整 Math.round(); 四舍五入缓动动画的原理缓动动画 ...
javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容
javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容在制作静态页面的时候,使用window.scroll()来实现点击爬楼的事件 ...
javaScript中三大家族总结
三大家族整体解释图第一大家族:offset家族 offset 是自己的-- 目的: 方便的获取元素尺寸 offsetWidth offsetHeight 得到对象的宽度和高度(自己的,与他人无关) ...
点击锚点链接时页面滚动的特效(Javascript Smooth Scroll)
方案一: 简单版原型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www ...
Javascript使用三大家族和事件来DIY动画效果相关笔记（五）
1.client家族 ◆box.clientWidth:表示盒子的宽度加padding ◆box.clientHeight:表示盒子的高度加padding ◆box.clientTop:表示盒子上边的 ...
Javascript使用三大家族和事件来DIY动画效果相关笔记（一）
1.offset家族 ◆offsetWidth和offsetHeight表示盒子真实的宽度高度,这个真实的宽度包括四周的边框.四周的padding.及定义的宽度高度或内容撑开的高度和宽度,可以用来检 ...
javascript的族家族史
JavaScript 实现完整的 JavaScript 实现是由以下 3 个不同部分组成的:ECMAScript.文档对象模型.浏览器对象模型. 这也就是说 cocos2d-js 中其实我们用的是 ...
JavaScript基础——滚动事件、加载事件、三大家族
文章目录一.滚动事件和加载事件 1.1 滚动事件 1.2 加载事件二.三大家族 2.1 scroll家族 2.2 offset家族 2.3 client家族一.滚动事件和加载事件 1.1 滚动事 ...

JavaScript四大家族之scroll家族

JavaScript四大家族之scroll家族相关推荐

最新文章

热门文章