滚动scroll

1、滚动宽高

scrollHeight：表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分。
scrollWidth：表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分。

[注意]IE7-浏览器返回值是不准确的

（1）没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等

scrollWidth和clientWidth的宽度等于width+padding(左右)。

（2）存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等

scrollWidth和clientWidth的宽度等于width+padding(左右)-滚动条的宽度。

    
    
    


    

        内容
内容

    
      
    

（3）存在滚动条，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性

[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight包含padding-bottom；而IE和firefox不包含padding-bottom

    
    
    


    

        内容
内容

    
      
    

2、页面尺寸

document.documentElement.clientHeight表示页面的可视区域的尺寸
document.documentElement.scrollHeight表示html元素内容的实际尺寸。

响应式字体大小的设置

    
    
    


    
hello
    

3、滚动长度。

（1）scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

（2）scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度

当滚动条到页面底部时，符合：scrollHeight==scrollTop+clientHeight

    内容
点击

    

    内容
    向下滚动
    向上滚动

响应式网站导航条滑动一定高度加个背景

4、页面滚动

通过document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动；但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的

点击

    

所以，页面的滚动高度兼容写法是:
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop

回到顶部

回到顶部