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. 生成随机数验证码的工具类（from韩顺平）

    生成随机数验证码的工具类 package com.cx; //生成随机数的图片 import java.awt.Color; import java.awt.Font; import java.awt ...

  2. Ubuntu 16.04安装Adobe AIR

    安装: wget -O adobe-air.sh http://drive.noobslab.com/data/apps/AdobeAir/adobe-air.sh chmod +x adobe-ai ...

  3. Linux: 删除当前目录下的所有__pycache__子目录

    find . -name '__pycache__' -type d -exec rm -rf {} \;

  4. 如何使用VB编写Excel的COM组件

    1 新建工程中选择"外接程序",点击打开之后右侧的属性窗口即显示为MyAddIn工程.(注意如果你使用的是VB精简版的没有"外接程序"的选项,请下载完整版的) ...

  5. C++学习之extern "C"

    我们知道,extern关键字可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义.这里起到的是声明作用范围的用处.另外,extern还可以与 ...

  6. Qt学习之QListWidget删除Item

    将QListWidgetItem从QListWidget列表中删除有两种方法能够做到.但也要依据自己的须要进行选择. 第一种是 QListWidgetItem *takeItem(int row); ...

  7. LeetCode 939. Minimum Area Rectangle (最小面积矩形)

    题目标签:HashMap 题目给了我们一组 xy 上的点坐标,让我们找出 能组成矩形里最小面积的那个. 首先遍历所有的点,把x 坐标当作key 存入map, 把重复的y坐标 组成set,当作value ...

  8. LeetCode 961. N-Repeated Element in Size 2N Array (重复 N 次的元素)

    题目标签:HashMap 题目给了我们一个size 为 2N 的int array,其中有 N + 1 个唯一的 数字,让我们找出那个重复的数字. 利用hashset,把每一个数字存入,一旦发现有重复 ...

  9. 我所不知道的 javascript 函数

    对字符串进行 Base64 加密: window.btoa(str) ---转码 window.atob(str) ---解码 这种加密方法不能加密中文,可以先进行 encodeURIComponen ...

  10. Cocos2d-x v3.0正式版尝鲜体验【2】 Android平台移植

    今天没事又尝试了下3.0正式版关于Android平台的移植,把新建的项目移植了下.过程仅用了十分钟左右,什么概念?! 好吧,事实上我想说,这个版本号真的移植非常轻松啊,只是还没加上其它东西,只是就眼下 ...