标签：滚动 window BOM scrollTop 浏览器 document 页面

一、什么是BOM？概念

BOM(Browser Object Model)全称，既是浏览器对象模型。

可以对浏览器进行操作：

获取一些浏览器的相关信息（窗口的大小）

操作浏览器进行页面跳转

获取当前浏览器地址栏的信息

操作浏览器的滚动条

浏览器的信息版本

让浏览器出现一个弹出框（alert/confirm/prompt）

BOM的核心就是Window对象

window是浏览器内置的一个对象，里面包含着操作浏览器的方法

二、window的核心对象使用

location:当前页面的地址

history:页面的历史记录

navigator:包含浏览器相关信息

screen:用户显示屏幕相关属性

document：文档对象

1.常用方法：prompt（用户输入对话框），alert(提示和确定警示)，confirm(提示确定和取消对话框)，

close(关闭浏览器窗口)，open(打开新的url窗口)，

setTimeout(在指定的毫秒数后调用函数或计算表达式)，setInterval(按照指定周期以毫秒计来调用函数或则表达式)

 

 2.定时器：什么是？图片轮播2s图片变换一次：用途在图片轮播、在线时钟、弹窗广告。

凡是自动执行的东西，很大可能是定时器相关

1）在javascript中，setTimeout()方法是设置“一次性”调用的函数。其中clearTimeout()可以用来取消这个函数

2)在javsscript中，可以使用setInterval()方法来设置“重复性”调用的函数，其中clearInterval()来取消执行。

3.获取浏览器窗口的尺寸（innerHeight和innerWidth）用window拼接

这两个方法分别是获取浏览器窗口的宽度和高度（包含滚动条的）

3.浏览器的onscroll事件：

//这个onscroll事件时当前浏览器的滚动条滚动的时候触发
或者鼠标滚轮滚动的时候触发
window.onscroll=function (){
     console.log('浏览器滚动了')
 }

//注意：前提是页面的高度要超过浏览器的可视窗口才可以

4.浏览器滚动的距离：

浏览器的内容可以滚动，那么就是可以获取到浏览器滚动的距离

思考：

浏览器真的滚动了吗?

其实我们的浏览器没有滚动的，是一直在那里

滚动的是什么？是我们的页面

所以说，其实浏览器没有动，只不过是页面向上走了

所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容

所以不是在用window对象了，而是使用document对象

5.浏览器（页面）滚动的距离

scrollTop 获取的是页面向上滚动的距离

两个获取方式：

document.body.scrollTop

document.documentElement.scrollTop

区别：

IE浏览器：没有DOCTYPE声明的时候，用这两个都行

有DOCTYPE声明的时候，只能用document。documentElement.scrollTop

Chrome和FireFox:

没有DOCTYPE声明的时候，用document.body.scrollTop

有DOCTYPE声明的时候，用document.documentElement.scrollTop

Safari

两个都不用，使用一个单独的方法window.pageYOffset

scrollLeft 获取页面向左滚动的距离

使用场景：滚动加载判断，回滚顶部，自动滚动列表

标签：滚动,window,BOM,scrollTop,浏览器,document,页面
来源： https://www.cnblogs.com/cc-font/p/15912143.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。