第49天:封装自己的scrollTop

简介: 一、scroll家族offset 自己的偏移scroll滚动的scrollTop和scrollLeftscrollTop 被卷去的头部当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离二、页面滚动效果事件window.

一、scroll家族

offset 自己的偏移
scroll滚动的

scrollTopscrollLeft
scrollTop 被卷去的头部
当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离
二、页面滚动效果事件
window.onscroll=function(){页面滚动语句}
三、获取scrollTop
谷歌和没有声明DTD<DOCTYPE>document.body.scrollTop
火狐和其他浏览器document.documentElement.scrollTop
IE9+和最新浏览器:window.pageXOffset; pageYOffset(scrollTop)
兼容性写法:
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;

四、json对象表示
var json={key:value,key1:value}
使用方法
var json={name:"李白",age:58};
json名.属性 json.name 李白

五、判断是否声明DTD
document.compatMode==="BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
注意大小写

六、封装scrollTop

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>封装自己的scrollTop</title>
 6     <style>
 7         body{
 8             height: 3000px;
 9         }
10     </style>
11 </head>
12 <body>
13 
14 </body>
15 </html>
16 <script>
17     //var json={left:10,right:10};
18     //json.left
19     function scroll(){
20         if(window.pageYOffset!=null){//IE9+和其他浏览器
21             return{
22                 left:window.pageXOffset,
23                 top:window.pageYOffset
24             }
25         }else if(document.compatMode=="CSS1Compat"){//判断是否声明DTD
26             return{//声明的
27                 left:document.documentElement.scrollLeft,
28                 top:document.documentElement.scrollTop
29             }
30         }
31         return{//未声明的
32             left:document.body.scrollLeft,
33             top:document.body.scrollTop
34         }
35     }
36 
37     window.onscroll=function(){
38         console.log(scroll().top);
39     }
40 </script>

 

相关文章
N..
|
22天前
|
XML JavaScript 数据格式
DOM编程中的Document对象
DOM编程中的Document对象
N..
12 0
|
8月前
window.scrollTop 不生效的原因,如何解决
window.scrollTop 不生效的原因,如何解决
253 0
|
7月前
|
JavaScript
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
34 0
|
11月前
|
前端开发
react事件对象无法获取offsetLeft、offsetTop、X、Y等元素解决方法
react事件对象无法获取offsetLeft、offsetTop、X、Y等元素解决方法
135 1
react事件对象无法获取offsetLeft、offsetTop、X、Y等元素解决方法
|
12月前
|
前端开发 JavaScript API
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
68 0
|
JavaScript IDE 开发工具
JS 中 offsetHeight/scrollHeight/clientHeight 的区别
client* clientWidth/clientHeight 返回的是元素的内部宽度,它的值只包含 content + padding,如果有滚动条,不包含滚动条 clientTop 返回的是上边
|
前端开发
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
前言 offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到,如果小伙伴们没有经常使用的话,很容易把这些属性搞混,比如说什么窗口高度、元素高度、内容高度等等。当然,现在的前端框架很多时候帮我们封装了这些属性,但是我们也不能太过依赖框架,底层的原理我们还是需要了解的,今天就来理一理这三个属性分别代表什么?
146 0
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
|
JavaScript
JS - scrollWidth、clientWidth、offsetWidth 区别
JS - scrollWidth、clientWidth、offsetWidth 区别
106 0
JS - scrollWidth、clientWidth、offsetWidth 区别
|
前端开发 JavaScript 开发者
Element scrollbar 使用封装
最近进行 Element UI 组件封装,在之前的项目中经常用到 el-scrollbar这个内置组件,这次单独封装时遇到点写法上的小问题,做个记录和分享,希望能帮到相关的开发者。
Element scrollbar 使用封装