scrollWidth：父div宽度小于子div宽度，父div scrollWidth宽度为子div的宽度，大于则为本身的宽度width+padding

scrollHeight：父div高度小于子div高度，父div scrollHeight高度为子div高度，大于则为本身的高度height+padding

注意事项：IE67，scrollHeight即使不超出盒子，它的值也是内容的高度

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div style="width: 100px;height: 100px;border: 1px solid #000;">
  9.     <div style="width: 120px;height: 400px;border: 1px solid #ccc;"></div>
  10. </div>
  11. <script>
  12.     var divEle=document.getElementsByTagName("div")[0];
  13.     console.log(divEle.scrollWidth);//122
  14.     console.log(divEle.scrollHeight);//402
  15. </script>
  16. </body>
  17. </html>

scrollLeft：被浏览器卷去的左边内容的长度

scrollTop：被浏览器卷曲的头部内容的长度

注意事项：一般通过window.onscroll监听，它们的使用有严重的兼容性问题：

1、未声明DTD（谷歌只认识这样的形式，IE9+也认识）：document.body.scrollTop

2、已经声明DTD（IE678只认识这样的形式，IE9+任何时候都认识）：document.documentElement.scrollLeft

3、不管是是否声明DTD（火狐谷歌IE9+认识）：window.pageYOffset

区别：谷歌判断依据是以body为主，而ie判断依据是整个html

判断是否声明：DTD：document.compatMode==="BackCompat"         BackCompat：未声明       CSS1Compat：已声明

  1. <script>
  2.     window.onscroll=function () {
  3.         var xLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
  4.         var yTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
  5.         document.title=xLeft+"  "+yTop;
  6.     }
  7. </script>

JS——scroll的更多相关文章

  1. js scroll 教程

    <html><head><script language=javascript>function s(){var c = window.document.body. ...

  2. js scroll函数

    $(function () { $(".sticky").hide(); var top = $(window).scrollTop(); if (top >= 100) { ...

  3. js scroll nav

    http://jsfiddle.net/cse_tushar/Dxtyu/141/http://ironsummitmedia.github.io/startbootstrap-scrolling-n ...

  4. JS——scroll动画

    固定导航栏 1.计算导航栏到顶部的距离值 2.当scrollTop值大于这个距离值就添加定位,当小于距离值后解除定位 注意事项:当导航栏添加定位之后,导航栏就脱离了文档流,也就是不占位了,下面的盒子就 ...

  5. JS——scroll封装

    DTD未声明:document.body.scrollTop DTD已声明:document.documentElement.scrollTop 火狐谷歌IE9:window.pageYOffset ...

  6. 原生JS scroll()、scrollTo()、scrollBy()

    scroll()  此方法接收两个参数,依次为X坐标和Y坐标:设置滚动条的偏移位置 scrollTo() 此方法和scroll()作用一样,都是设置滚动条的偏移位置. scrollBy() 此法发同样 ...

  7. js scroll动画

    知识点 1.window.scrollTo (x,y):可以把内容滚动到指定位置  scroll  scroll:卷动意思(书卷)  从上到下移动   1.window.onscroll 窗口滚动事件 ...

  8. nightwatch.js - scroll until element is visible

    .getLocationInView() Determine an element's location on the screen once it has been scrolled into vi ...

  9. js scroll事件

    滚动改变头部颜色,当滚动到最顶端头部颜色还原 滚动前 滚动后 代码

随机推荐

  1. 最小公倍数LCM

    基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 输入2个正整数A,B,求A与B的最小公倍数. Input 2个数A,B,中间用空格隔开.(1<= A,B <= ...

  2. vijos - P1122出栈序列统计 (卡特兰数)

    P1122出栈序列统计 未递交 标签:NOIP普及组2003[显示标签] 描写叙述 栈是经常使用的一种数据结构,有n令元素在栈顶端一側等待进栈,栈顶端还有一側是出栈序列. 你已经知道栈的操作有两·种: ...

  3. MySQL中採用类型varchar(20)和varchar(255)对性能上的影响

    1.MySQL建立索引时假设没有限制索引的大小,索引长度会默认採用的该字段的长度.也就是说varchar(20)和varchar(255)相应的索引长度分别为20*3(utf-8)(+2+1),255 ...

  4. android 4.0主线程訪问网络问题

    在4.0下面,在主线程中訪问网络,假设请求超过6s的话,就会报ANR,那么这就会带来一个问题,假设网络慢或者请求的数据过大时,界面会卡顿,造成界面灵敏性非常差,因此网络请求一般不能放在主线程中操作,g ...

  5. excel 字符串拼接 添加 超链接

    =HYPERLINK("http://"&C2,"http://"&C2)

  6. 【转】Android进阶2之 阴影制作（Shadow）

    阴影制作:包括各种形状(矩形,圆形等等),以及文字等等都能设置阴影. 阴影制作是什么原理呢? 其实很简单,你需要设置阴影的东西被看作一个主层.然后在主层下面画一个阴影层. 阴影制作涉及到一个重要函数: ...

  7. 【总结】设备树对platform平台设备驱动带来的变化（史上最强分析）【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74375086 版权声明:本文为博主原创文章,转载请注明http://blog.c ...

  8. openStack调试

  9. 如何通过DirectInput技术针对莱仕达雷驰V3II游戏方向盘编程

    三自由度的动感座椅可以让玩游戏人员在玩的过程中随座椅一起晃动,通过应用程序对方向盘动作的抓取来实现体感,动作类型主要分为加速(后仰,对应踩油门).减速(前倾,对应踩刹车 ).左转(向左打方向盘).右转 ...

  10. php打包文件夹成zip文件

    function addFileToZip($path,$zip){    $handler=opendir($path); //打开当前文件夹由$path指定.    while(($filenam ...