查看滚动条的距离

方法	版本
window.pageXOffset / pageYOffset	IE9/IE8及以下不支持(常规)
document.body.scrollLeft/scrollTop	IE9/IE8及以下(部分支持，具体看模式)
document.documentElement.scrollLeft/scrollTop	IE9/IE8及以下(部分支持，具体看模式)
window.scrollX / scrollY	不常见

滚动条距离：也看页面真实移动了多少，不要看物理距离

兼容模式

浏览器的怪异模式和标准模式

意味着需要按照W3C规范
CSS1Compat - W3C的兼容模式：标准模式

<!DOCTYPE html>

若删除<!DOCTYPE html> 则为BackCompat - 怪异模式

浏览器的可视区域

方法	模式
window.innerWidth / innerHeight	IE9/IE8及以下不支持(常规)【包括滚动条】
document.documentElement.clientWidth / clientHeight	IE9/IE8及以下 - 标准【不包括滚动条】
document.body.clientWidth / clientHeight	IE9/IE8及以下 - 怪异【包括滚动条】

outerWidth / outerHeight （包含了滚动条、侧边栏、控制台等）

文档尺寸

scrollWidth = window.innerWidth + window.pageXOffset 是真正html文档的宽高

方法	模式
document.documentElement.scrollWidth /scrollHeight	IE9/IE8及以下 - 标准【不包括滚动条】
document.body.scrollWidth / scrollHeight	IE9/IE8及以下 - 怪异【包括滚动条】

div.getBoundingClientRect()

在IE中不返回宽高，可以用bottom-top计算
不实时计算

offsetLeft

只认父级的定位元素，没有则向上找到可视区域的边框
margin塌陷
解决1，父元素加上边距
解决2，BFC 但是offsetLeft仍然是100

offsetParent

找有定位的父级
没有则找到body

封装方法

小盒子（左上角）距离文档左上角的坐标
document.body.offsetLeft 0

操作滚动条

要滚动到window.scroll(x,y) / window.scrollTo(x,y)
每一次滚动多少window.scrollBy(x,y) 应用：计时器+每次滚动（自动滚动）

DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸相关推荐

获取滚动条滚动距离兼容写法
在chrome中,浏览器的滚动条是属于body的,可以通过 document.body.scrollTop来获取垂直滚动距离, document.body.scrollLeft来获取水平滚动距离, 火 ...
DOM初探（14）——查看滚动条的滚动距离
一:DOM基本操作: 查看滚动条的滚动距离 window.pageXOffset/pageYOffset IE8及以下不兼容(只有IE9以上的浏览器能用) document.body/document ...
使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版] 原理: W3C将DOM2.0模型中事件处理流程分为三个阶段: 一.事件捕获阶段: 当某个元素触发某个事件(如onclic ...
vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度
VUE如何实时监听元素距离顶部高度发布时间:2020-07-30 09:09:43 来源:亿速云阅读:150 作者:小猪这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...
vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...
JavaScript网页滚动距离
不同浏览器获取网页滚动距离的方法不同浏览器在渲染网页的时候有两种模式:"标准模式(CSS1Compat)"."混杂模式/怪异模式(BackCompat)" 默 ...
小程序自定义导航封装成组件后如何监听滚动距离
我获取滚动的距离,主要是想做自定义导航吸顶效果之后对样式进行改变的效果思路:根据滚动距离的临界值,改变isActive的值第一步:曲线救国的方式,因为onPageScroll方法在组件中不生效(目 ...
javaScript:获取页面滚动距离的元素.scrollTop和元素.scrollLeft获取的兼容性处理（IE、Chrome 、 FireFox、Safari）
+ 向上滚动的距离: 元素.scrollTop 区别: ==> IE 浏览器 + 没有 DOCTYPE 声明的时候,用这两个都行 + 有 DOCTYPE 声明的时候,只能用 document.d ...
android 应用置顶到最前端_uniApp / 小程序实现一个view滚动到一定高度置顶显示
最近在使用uniApp做一个模仿美团小程序的demo,其中遇到这样一个需求,就是筛选模块滚动到顶部就置顶显示查阅了uniApp的官方文档以及微信小程序的官方文档,发现都有一个相同的API,如下: 实 ...

DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸

查看滚动条的距离

兼容模式

浏览器的怪异模式和标准模式

浏览器的可视区域

文档尺寸

div.getBoundingClientRect()

offsetLeft

offsetParent

封装方法

操作滚动条

DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸相关推荐

最新文章

热门文章