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. zoj——3557 How Many Sets II

    How Many Sets II Time Limit: 2 Seconds      Memory Limit: 65536 KB Given a set S = {1, 2, ..., n}, n ...

  2. 使用微信JSSDK实现图片上传

    近期做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发人员文档链接:微信开发人员文档 主要用到了: 引入JS文件 在须要调用JS接口的页面引入例如以下JS文件.(支持https) ...

  3. PHP的mod_rewrite重写模块将.php后缀换成.html

    apache Rewrite mod_rewrite的魔力 简单举例:创建三个文件.分别命名为 test.html,test.php和.htaccess test.html 输入: <h1> ...

  4. react 使用

    我的有道云笔记 React 事件: 1.不能使用 return false; 来阻止元素的默认行为.需要在方法的最前面使用 e.preventDefault() 来阻止元素的默认行为(例如:a 标签的 ...

  5. 2014年最简单、快捷的美股Scottrade开户攻略

    [开篇重点提示] 1.scottrade是国内用户用得最多的美股证券交易平台. 2.不用邮寄纸质资料,网上开户全搞定. 3.申请表格填写优惠代码,获取免费3次交易费用,鄙人的推荐优惠代码是 87195 ...

  6. 20170623_oracle基础知识_常见问题

    1 如何配置网络服务?两种连接 Oracle 工具? 1) 打开Net Manager 2) 选择服务命名,点击“+ ”号 3 ) 网络服务名:  remote协议:tcp/ip 主机名:ip地址 端 ...

  7. C# 数组转换为DataTable 的三个方法

    C# 数组转换为DataTable 的三个方法   using System; using System.Data; namespace ArrayToDataTable { class ArrayT ...

  8. 选择排序(2)——堆排序（heap sort）

    前期概念: 二叉树 完全二叉树 左序遍历 中序遍历 右序遍历 堆 小根堆 大根堆 堆排序(Heapsort)是指利用堆积树(堆)这种数据结构所设计的一种排序算法,它是选择排序的一种.可以利用数组的特点 ...

  9. App上架流程 & 上架被拒10大原因

    上架前预热 先登陆自己的开发者账号(自己提前注册好 iOS 开发者账号,这里假设你已经拥有了一个 iOS 开发者账号),进入这个页面:https://developer.apple.com/accou ...

  10. E20170623-ts

    filter   n. 滤波器; 滤光器; 滤色镜; [化] 过滤器; mass   n. 大量,大多; 块,堆,团; [物理学] 质量; 弥撒曲; assignment  n. 分给,分配; 任务, ...