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. Sliding Window（滑动窗口）

    Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 58002   Accepted: 16616 Case Time Limi ...

  2. ECMAScript 6 入门学习笔记（一）——let和const

    一.let ①声明变量 let a = 1: ②只在所在代码块内有效,不影响块以外 ③不存在变量提升(不能先用后声明) ④暂时性死区 let声明的变量“绑定”这个区域,不受外部影响. let声明之前, ...

  3. cogs——1786. 韩信点兵

    1786. 韩信点兵 ★★★   输入文件:HanXin.in   输出文件:HanXin.out   简单对比 时间限制:1 s   内存限制:256 MB [题目描述] 韩信是中国军事思想“谋战” ...

  4. hp 1810-24g switch reset

    Specific steps to execute the factory default reset on the switch are: 1. Using a small, thin tool w ...

  5. 数据结构——算法之（027）（ 在O(1)时间内删除链表结点）

    [申明:本文仅限于自我归纳总结和相互交流,有纰漏还望各位指出. 联系邮箱:Mr_chenping@163.com] 题目:在O(1)时间内删除链表结点.且不知道链表头 题目分析: 1.把要删除节点的下 ...

  6. 【转】MySQL随机字符串生成

    DROP FUNCTION IF EXISTS rand_string; DELIMITER $$ CREATE FUNCTION rand_string(str_length TINYINT UNS ...

  7. Android横竖屏切换不重新调用onCreate()

    再次感叹Android的碎片化!!!! 设置AndroidManifest.xml中Activity的android:configChanges=”keyboardHidden|orientation ...

  8. [POI 2007] Zap

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1101 [算法] 首先 , 问题可以转化为求GCD(x,y) = 1,x <= ...

  9. [Codeforces 489E] Nastya and King-Shamans

    [题目链接] http://codeforces.com/contest/992/problem/E [算法] 线段树 + 二分 时间复杂度 : O(NlogN^2) [代码] #include< ...

  10. JSP-Runoob：JSP XML 处理数据

    ylbtech-JSP-Runoob:JSP XML 处理数据 1.返回顶部 1. JSP XML 数据处理 当通过HTTP发送XML数据时,就有必要使用JSP来处理传入和流出的XML文档了,比如RS ...