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. Error:java: Internal compiler error: java.lang.Exception: java.lang.NoClassDefFoundError解决

    场景:将Eclipse的可以运行的项目转到IDEA发现一个奇怪的错误 今天用IDEA2018.1运行SpringBoot项目报错如下: Error:java: Internal compiler er ...

  2. 互斥的数（codevs 1553）

    题目描述 Description 有这样的一个集合,集合中的元素个数由给定的N决定,集合的元素为N个不同的正整数,一旦集合中的两个数x,y满足y = P*x,那么就认为x,y这两个数是互斥的,现在想知 ...

  3. SQL SERVE BASE

    http://www.cnblogs.com/chillsrc/category/49632.html

  4. Android: 阻止ScrollView随着数据加载自动滚动

    当ScrollView中有类似GridView的控件时,当数据加载后ScrollView会自动滚动.要阻止这种事情发生,我们需要做的是在ScrollView的下层容器中添加android:descen ...

  5. linux下nginx+svn

    http://fengqi.me/unix/23.html 因为没有什么可以定制的, 所以svn直接使用系统自带的包管理软件安装, 以centos系列为例, 命令如下: yum install sub ...

  6. Cocos2d-x教程(26)－Cocos2d-x + Lua脚本实现大地图缩放功能

    欢迎增加 Cocos2d-x 交流群: 193411763 视频教程地址:http://www.tudou.com/programs/view/qRiOfppMghM/ 转载请注明原文出处:http: ...

  7. sed 之 -n p

    sed是一个面向字符流的编辑器,一般情况下每次读入一行到一个名为模式空间的地方,进行编辑:但是也可以读入多行数据进行编辑. -n:抑制默认输出 p打印模式空间内容 cat test a b sed ' ...

  8. oc71--NSArray2

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject - (void)say; - ( ...

  9. 【Codevs3567】宫廷守卫

    Position: http://codevs.cn/problem/3567/ Description 从前有一个王国,这个王国的城堡是一个矩形,被分为M×N个方格.一些方格是墙,而另一些是空地.这 ...

  10. restrict关键字

    值得注意的是,一旦你决定使用restrict来修饰指针,你必须得保证它们之间不会互相重叠,编译器不会替你检查. 关键字restrict有两个读者.一个是编译器,它告诉编译器可以自由地做一些有关优化的假 ...