11_JS的scroll家族

知识结构

• Html基本结构访问方法
• scroll家族
• 页面滚动事件
• scrollTop、scrollLeft
• 获取scrollTop以及兼容性写法获取
• JSON
• 判断是不是怪异模式的浏览器
• 封装自己的scrollTop、scrollLeft
• 案例
• 固定导航栏
• 跟随的广告
• scrollTo(x,y)
• 案例
• 带动画的返回顶部
• 浏览器滑动效果

Html基本结构访问方法

文档是 document，下面有html body head

• document.head
• document.body
• document.title
• 没有 document.html 取而代之的是 document.documentElement;

scroll家族

• Offset 自己的偏移
• scroll 滚动的

页面滚动事件

window.onscroll = function() { 页面滚动语句  }

scrollTop、scrollLeft

scrollTop 被卷去的头部

它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

获取scrollTop

• document.body.scrollTop;
• 如果页面包含DTD：则只有 谷歌浏览器支持
• 如果页面不包含DTD：，则谷歌浏览器和其他浏览器都支持
• document.documentElement.scrollTop;
• 谷歌浏览器不支持，火狐和其他浏览器支持
• window.pageYOffset（scrollTop）、window.pageXOffset;
• IE9+以及其他最新的浏览器都支持

兼容性写法：

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScript
　　Json很像我们学过的样式条；
var myjson={k:v,k:v,k:v...} 键值对 key: value color: red;

json对象

var json = { key: value， key1:value }

var json1 = {name :"刘德华",age: 55};
console.log(json1.name);  // 输出名字  刘德华
console.log(json1.age);  // 输出年龄  55

判断是不是怪异模式的浏览器

检测是不是怪异模式的浏览器 -- 就是检测有没有声明

document.compatMode == "CSS1Compat"
document.compatMode === "BackCompat"

BackCompat 未声明
CSS1Compat 已经声明
注意大小写

封装自己的scrollTop、scrollLeft

    
    
    
    


    
123

例：固定导航栏

    
    
    
    


    

        ![](images/top.png)
    
    

        ![](images/nav.png)
    
    

        ![](images/main.png)
    

例：跟随的广告

    
    
    
    


    ![](images/aside.jpg)
    

        
你好
        
你好
        
你好
        
你好
        
你好
        
你好
    

scrollTo(x,y)

window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式：

scrollTo(xpos,ypos)

xpos必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

例：带动画的返回顶部

    
    
    
    


    ![](images/Top.jpg)
    

        
你好
        
你好
        
你好
        
你好
        
你好
        
你好
    

例：浏览器滑动效果

    
    
    
    



    
首页
    
动态
    
朋友
    
设置
    
退出


    
首页
    
动态
    
朋友
    
设置
    
退出