javascript scrollbar滚动条相关属性

window.innerHeight 表示浏览器可见或可用高度

window.pageXOffset 和 window.pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

// 所有浏览器，除了 IE9 及更早版本

水平滚动: " + window.pageXOffset ;

垂直滚动: " + window.pageYOffset;

// IE9 及更早版本

"水平滚动: " + document.documentElement.scrollLeft ;

垂直滚动: " + document.documentElement.scrollTop;

scrollHeight和scrollTop属性只有DOM元素才有，window/document没有

element.getBoundingClientRect();返回一组用于描述边框的只读属性——left、top、right和bottom，单位为像素，如下图

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。

为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。

附：

dom 从可视窗口消失计算

dom.getBoundingClientRect().top - window.document.body.clientTop < 0 则从上方消失

dom.getBoundingClientRect().top - window.document.body.clientTop > window.innerHeight 则从下方完全消失

如果要计算刚开始消失，还需要dom的高度如下：

dom.getBoundingClientRect().top - window.document.body.clientTop > window.innerHeight - dom.height

绝对定位某个dom位置

left = dom.getBoundingClientRect().left + window.pageXOffset - window.document.body.clientLeft

top = dom.getBoundingClientRect().top + window.pageYOffset - window.document.body.clientTop

javascript scrollbar滚动条相关属性相关推荐

android 滚动条相关属性
属性名称描述 android:background 设置背景色/背景图片.可以通过以下两种方法设置背景为透明:"@android:color/transparent"和" ...
Javascript - 实现Javascript控制ScrollBar(滚动条) - 学习/实践
1.应用场景主要用于控制srollbar的位置, 实现界面定位效果. 2.学习/操作在Javascript中有三种方法能够控制滚动条的位置. 方法一:用scroll函数实现 scroll(x,y) ...
JavaScript 中BOM及window的相关属性及方法
概述:BOM (全称bowser object model) 浏览器对象模型,他是用于操作浏览器相关的内容.BOM是一个缺乏规范的东西,为了保证他的规范性产生了一系列的共用对象来解决这个问题.沿用至今 ...
jQuery插件：Tiny Scrollbar滚动条插件（滚动条美化、默认滚动条）
Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小. 插件特点: 支持iPhone, iPad, Android 新版1.8,可以在移动设备上滚动内容 ...
CSS3的字体和文本相关属性
CSS3其中一个重要变化就是增加了服务器字体功能,这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题.通过CSS3的服务器字体功能,可以控制浏览器使用服务器包含的字体,这样可以保证即使我们的电 ...
6、尺寸和定位的相关属性
一.CSS3新增的与尺寸相关的属性新增了box-sizing和resize两个与尺寸相关的属性. 1.box-sizing用于设置盒模型组成模式:content-box border-box 值co ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
CSS样式字体与文本相关属性
CSS样式字体与文本相关属性字体相关属性基本属性添加阴影添加多阴影微调字体大小颜色表示文本相关属性文本基本属性文本自动换行长单词和URL地址换行 CSS3新增服务器字体字体相关属 ...
非常全的javascript控制MediaPlayer的属性集合
播放: MediaPlayer.Play() 暂停: MediaPlayer.Pause() 定位: MediaPlayer.SetCurrentEntry(lWhichEntry) MediaPla ...

javascript scrollbar滚动条相关属性

javascript scrollbar滚动条相关属性相关推荐

最新文章

热门文章