第49天:封装自己的scrollTop

一、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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding...

Objective-C 自定义UISlider滑杆 分段样式效果需求分析代码部分DEMO地址

查看UISlider控件发现这个类是继承自UIControl,那么就自定义一个UIControl来实现UISlider没有的效果。 公开的变量中都是一些通用的...

1933
来自专栏ios 技术积累

ios 圆形进度条

有很多开源的进度条不用,非要弄这种效果,就不吐槽了,还是想想怎么实现 废话就不多说了 直接上代码

2344
来自专栏Alice

demo1 动态显示view或弹框 动态隐藏view或弹框

实现界面如上所示: 有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框。点击弹框的周围区域也可以关闭按钮。 点击上边的隐藏弹框也可以关闭按钮。 在实现...

2075
来自专栏前端说吧

JS-缓冲运动-对联型悬浮框

3035
来自专栏狂码一生

js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.bod...

49910
来自专栏Alice

demo1 动态显示view或弹框 动态隐藏view或弹框

有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框。点击弹框的周围区域也可以关闭按钮。 点击上边的隐藏弹框也可以关闭按钮。   在实现功能的基础上,以...

2187
来自专栏谈补锅

Quartz2D复习(三) --- 涂鸦

和上一篇手势解锁不一样,手势解锁只画了一条路径,从触摸开始--》触摸移动--》触摸结束 ,然后路径完成了,渲染出来就是手势解锁了;

1083
来自专栏技术总结

教你如何自定义AlertView

3575
来自专栏我和未来有约会

为UINavigationBar添加自定义背景

@implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRe...

1969
来自专栏前端知识分享

第44天:鼠标移动放大效果

1104

扫码关注云+社区

领取腾讯云代金券