专栏首页前端知识分享第49天:封装自己的scrollTop

第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 条评论
登录 后参与评论

相关文章

  • 第87天:HTML5中新选择器querySelector的使用

    1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回nu...

    半指温柔乐
  • 第52天:offset家族、scroll家族和client家族的区别

    半指温柔乐
  • 第51天:封装可视区域大小函数client

        offsetWidth: width  +  padding  +  border (披着羊皮的狼)  

    半指温柔乐
  • 在不同浏览器都实用的各窗口大小获取方法

    // 浏览器窗口 var w= document.documentElement.clientWidth || document.body.clie...

    就只是小茗
  • 浏览器中的几个高度

    载入首批数据,文档高度( $('html').height() == 2500px )

    WZR
  • Web性能优化系列:10个JavaScript性能提升的技巧

    Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程。他是《高性能 Javascript》的作者,这本书值得每个程序员去阅读。

    哲洛不闹
  • TouchEvent猜想与验证

    节前在支援一些移动页面的时候,遇到了蛮多的TouchEvent相关的问题,趁着假期一一验证一下。

    libo1106
  • 何谓“人工智能”?如何做到“强人工智能”?

    本文是工程师Narasimha Prasanna HN撰写的技术博文,主要介绍人工智能的概念,当前人工智能的水平,以及什么是强人工智能,当前实现强人工智能的方向...

    WZEARW
  • 不得不知的ES6十大特性

    ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。...

    庞小明
  • 最新Science:类脑“人造突触”实现运算存储同步,能耗仅需计算机的十分之一

    人脑可以在能耗很低的条件下具备同时学习和记忆大量信息的能力,而目前传统的计算机系统只能先处理数据,再移动到存储中。

    新智元

扫码关注云+社区

领取腾讯云代金券