Web APIs---12. PC端网页特效(2)

2 元素可视区client系列

2.1 概念

2.2 淘宝flexible.js文件的分析

2.2.1 立即执行函数

淘宝flexible.js文件里面有这样一个函数

(function flexible(window, document) {}(window, document))

这是一个立即执行函数，淘宝所有的js代码都写在这个立即执行函数中，一引入这个js文件就立即执行。立即执行函数最大的作用就是独立创建了一个作用域，立马所有的变量都是局部变量,如果还引入了其他的js文件，也不会和本js文件出现变量名冲突的问题。

2.2.2 window.devicePixelRatio像素比

• 设备像素比返回了设备上的物理像素和当前设备CSS像素的一个比值， 这个数值告诉浏览器多少屏幕实际的像素点被用来画了一个CSS像素点。-
• window.devicePixelRatio = 物理像素 / css像素

2.2.3 pageshow

• 综上：在火狐浏览器中，前进和后退按钮，并不能重新加载页面

pageshow 是我们重新加载页面触发的事件

    
    连接

3 元素滚动scroll系列

3.1 元素scroll系列属性

对于scrollHeight和scrollWidth

• 情况1：

    

        我是内容
    
    

• 情况2

    

        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
    
    

对于scrollTop和scrollLeft

    
    
    
    



    

        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
    
    

3.2 案例：仿淘宝固定右侧侧边栏

• 思路
  
• 案例分析
  

    

        返回顶部
    
    
头部区域
    
banner区域
    
主体部分
    

3.3 页面被卷去的头部兼容性问题解决方案

• DTD是指这句话
• 兼容性方案如下
  

三大系列总结

它们最常用于:

知识点补充

mouseenter和mouseover的区别