JavaScript四大家族之scroll家族

简介: javascript 元素对象拥有scroll家族主要属性: ScrollTop:  (被滚动条卷去的头部高度) ScrollLeft:  (被滚动条卷曲的左侧距离) ScrollWidth  (内容实际宽度:width+padding+超出盒子的宽度) ScorllHeight  (内容实际高度:height+padding+超出盒子的高度) Scroll可通过元素对象的属性ScrollTop和ScrollLeft找到它。

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

 

目录
相关文章
|
5月前
|
存储 自然语言处理 前端开发
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
200 1
|
JavaScript
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
1233 0
js监听页面或元素scroll事件,滚动到底部或顶部
|
JavaScript
js:Vue.js自定义指令实现scroll下滑滚动翻页
js:Vue.js自定义指令实现scroll下滑滚动翻页
216 0
|
JavaScript
js:监听页面滚动scroll,实现阅读进度条
js:监听页面滚动scroll,实现阅读进度条
361 0
|
存储 XML 前端开发
JS的二进制家族:Blob、ArrayBuffer和Buffer
ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同
JS的二进制家族:Blob、ArrayBuffer和Buffer
|
Web App开发 存储 JSON
JS的二进制家族:Blob的具体介绍
Data URL对大家来说并不陌生,Web性能优化有一项措施:把小图片用base64编码直接嵌入到HTML文件中,实际就是利用了Data URL来获取图片数据。
|
JSON JavaScript 前端开发
JS的二进制家族:ArrayBuffer的具体介绍
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作,而是要通过类型数组对象 或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。
JS 元素滚动 scroll
一文掌握 JS 元素滚动 scroll
JS 元素滚动 scroll
|
JavaScript
js中offset、scroll、client三大系列
js中offset、scroll、client三大系列
126 0
js中offset、scroll、client三大系列
|
JavaScript
js:监听页面滚动scroll的距离
js:监听页面滚动scroll的距离
209 0