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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="width: 100px;height: 100px;border: 1px solid #000;">

    <div style="width: 120px;height: 400px;border: 1px solid #ccc;"></div>

</div>

<script>

    var divEle=document.getElementsByTagName("div")[0];

    console.log(divEle.scrollWidth);//122

    console.log(divEle.scrollHeight);//402

</script>

</body>

</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：已声明

<script>

    window.onscroll=function () {

        var xLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;

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

        document.title=xLeft+"  "+yTop;

    }

</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. Spring Boot中使用Swagger2生成RESTful API文档（转）

    效果如下图所示: 添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <!-- https://mvnrepository.com/artifact/io.springfox ...

  2. FreeMarker与Spring MVC 4集合的HelloWorld示例

    0.整体的项目结构 1.引入POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...

  3. Linux: 查找使用中的port

    找出所有使用中的port netstat -tulpn 输出 Active Internet connections (only servers) Proto Recv-Q Send-Q Local ...

  4. 为什么 Android Studio 工程文件夹占用空间这么大？

    为什么 Android Studio 工程文件夹占用空间这么大? 学习了: https://www.cnblogs.com/chengyujia/p/5791002.html

  5. 如何修改ICO文件的尺寸

    使用Axialis IconWorkshop,该软件下载地址: http://www.xiazaiba.com/html/161.html 尺寸过大的ICO将无法作为应用程序的图标,如下图所示,这些素 ...

  6. 负载均衡算法，轮询方式 大话设计模式之工厂模式 C#

    负载均衡算法,轮询方式 2018-04-13 17:37 by 天才卧龙, 13 阅读, 0 评论, 收藏, 编辑 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现 ...

  7. LeetCode 237. Delete Node in a Linked List （在链表中删除一个点）

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  8. poj1852ant

    题意是这种,有一堆蚂蚁在一根棍子上乱爬.速度都是一样的,假设它们撞到了一起就会朝反方向爬去. 把棍子长度告诉你.还有蚂蚁的数量以及它们某时的距离棍子左端的距离.要求全部蚂蚁都掉到棍子以下去 的最小可能 ...

  9. 51nod 1642 区间欧拉函数 && codeforce594D REQ

    画一下柿子就知道是求区间乘积乘区间内所有质因数的(p-1)/p(就是求欧拉的公式嘛) 看上去莫队就很靠谱然而时间O(nsqrt(n)logn)并不资瓷 还是离线,确定右端点,对于1~i的区间内的质因数 ...

  10. 选择排序(1)——简单选择排序（selection sort）

    选择排序是一种很常见的排序算法,它需要对数组 中的元素进行多次遍历.每经过一次循环,选择最小的元素并把它放在靠近数组前端的位置. 代码实现: public static void selectionS ...