跟DOM一样，BOM其实也是由很多的API组成。 不过对于BOM来说，最痛苦的不是不记得API，而是明明记得这个这个API，却没有考虑到它的兼容性。

　　之前的文章中讲到了offset系列的属性，他的宽高是由border，padding和width组成的。而它的offsetLeft和offsetTop则是相对于offsetParent的距离。这里的offsetParent指的是子盒子有定位的父级元素，而如果子盒子没有有定位的父级元素，那么它的offsetParent就是body。讲过了offset系列的，就该讲讲scroll系列的了。

　　首先就来说说scrollWidth和scrollHeight这两个属性分别获取的是元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #box {

            width: 100px;

            height: 100px;

            border: 5px solid red;

            padding: 10px;;

        }

    </style>

</head>

<body>

    <div id="box">

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

        啦啦啦

    </div>

    <script>

        var box = document.getElementById("box");

        console.log(box.scrollHeight);

        console.log(box.offsetHeight);

    </script>

</body>

</html>

　　上述代码分别输出了div的scrollHeight和offsetHeight，在控制台中，这两个属性打印的值分别是297和130；第二个值没有问题，他就是盒子上下边框宽加上下内边距加高度后得来的。而第一个值，获取的则是撑开之后的大小。可能对于这个值具体的算法有疑问，不过，在实际开发中一般不会出现有很大的内边距和边框时要你使用scrollHeight值的。所以不必太纠结为什么是这个数值，我们只要知道这个数值是随着内容的改变而改变就好了。scrollHeight值得算法是如果内容区域小于上下内边距加高度，那么它的值就是上下内边距加高度，否则就是内容撑开的高度。scrolltLeft也是同理。

　　而说完了scrollHeight和scrollLeft之后，就该来说说scrollTop和scrollLeft了，这两个值的用法相同。所以就来说说其中的offsetTop；一般来说，这两个属性都会配上鼠标移动事件来使用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #box {

            width: 100px;

            height: 100px;

            overflow: auto;

        }

    </style>

</head>

<body>

    <div id="box">

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

        老王走了

    </div>

    <script src="common.js"></script>

    <script>

        var box = my$("box");

        box.onscroll  = function () {

            console.log(box.scrollTop);

        }

    </script>

</body>

</html>

　　上述代码在拉动滚动条的时候执行，输出div的scrollTop。scrollTop显示的是内容区域向上移动的距离。

　　上面的代码获取的只是那个小的div中的滚动事件，那么如果在页面中呢？我们就可以把整个页面看做是一个div。这时候就遇到一个问题了，页面到底是body呢，还是html呢？其实，不同的浏览器有不同的解析方式。这时候，我们就要封装兼容性代码了。

function scroll() {

    return {

        scrollLeft:document.body.scrollLeft || document.documentElement.scrollLeft,

        scrollTop:document.body.scrollTop || document.documentElement.scrollTop

    };

}

　　在这里，我们封装了一个scroll函数，用来返回一个对象，这个对象有两个属性，这两个属性在调用的时候可以获取页面的滚动距离，并且，如果浏览器是根据body来获取或者根据html来获取他都能兼容。

BOM基础（二）的更多相关文章

  1. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

  2. Python全栈开发【基础二】

    Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...

  3. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  4. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  5. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  6. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  7. Bootstrap <基础二十五>警告（Alerts）

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  8. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  9. Bootstrap <基础二十三>页面标题（Page Header）

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  10. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

随机推荐

  1. Firebug及YSlow简介与使用图文详解

    Firebug本是Firefox浏览器下一个出色的网页设计插件,随着浏览器的发展,Firebug也推出了支持IE.Opera.Chrome的Firebug Lite.凭借Firebug的出色代码调试功 ...

  2. Java split字符串中包含.的情况

    "a.b".split(".")的语句会返回[],必须进行转义, "a.b".split("\\.")

  3. Bootstrap入门（十九）组件13：页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

  4. DTLS 技术要点解析

    一.DTLS DTLS 是指 Datagram Transport Level Security,即数据报安全传输协议: 其提供了UDP 传输场景下的安全解决方案,能防止消息被窃听.篡改.身份冒充等问 ...

  5. 用Spark学习矩阵分解推荐算法

    在矩阵分解在协同过滤推荐算法中的应用中,我们对矩阵分解在推荐算法中的应用原理做了总结,这里我们就从实践的角度来用Spark学习矩阵分解推荐算法. 1. Spark推荐算法概述 在Spark MLlib ...

  6. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  7. 蓝桥网试题 java 算法训练 区间k大数查询

    -------------------------------------------------------------------------- 数组也有sort方法 尽量把输入和操作分开写 -- ...

  8. C++编程练习(13)----“排序算法 之 堆排序“

    堆排序 堆是具有下列性质的完全二叉树:每个结点的值都大于或等于其左右孩子结点的值,称为大顶堆(也叫最大堆):或者每个结点的值都小于或等于其左右孩子结点的值,称为小顶堆(也叫最小堆). 最小堆和最大堆如 ...

  9. 阿里云SSD等磁盘挂载方法（详细步骤完整版）

    1,根据提示购买一块,在阿里云管理磁盘的列表"更多"点击,选中"挂载": 2,进入远程实例(远程系统),管理-->存储-->磁盘管理,在右侧看到新挂 ...

  10. 浅谈 MVC中的ViewData、ViewBag和TempData

    ViewBag和TempData的区别 ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从Asp.net MVC 1 就有了 ASP.NET MVC3 才 ...