DOM初探（14）——查看滚动条的滚动距离

一：DOM基本操作：

查看滚动条的滚动距离
1. window.pageXOffset/pageYOffset
  1. IE8及以下不兼容(只有IE9以上的浏览器能用)
2. document.body/documentElement.scrollTop
  1. 兼容性比较混乱，用时取两个值相加，因为不可能存在两个相同的值（但凡document.body.scrollLeft/Top有值，document.documentElement.scrollLeft/Top一定就是0）

纵向滚动条：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>abraham</title></head><body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><script type="text/javascript"></script></body>
</html>

现在window.pageYOffset是0，因为咱们还是在第一页，没有滚动到下面。

咱滚动一点试试：

横向滚动条：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>abraham</title></head><body><hr style="widows: 10000px;"><script type="text/javascript"></script></body>
</html>

练习39：

封装兼容性方法，求滚动轮距离getScrollOffset()

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>abraham</title></head><body><hr style="width: 10000px;"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><script type="text/javascript">function getScrollOffset() {if(window.pageXOffset){return {x : window.pageXOffset,y : window.pageYOffset}}else{return {x : document.body.scrollLeft + document.documentElement.scrollLeft,y : document.body.scrollLeft + document.documentElement.scrollTop}}}</script></body>
</html>

视频：https://ke.qq.com/course/231577?taid=3983676656552089

DOM初探（14）——查看滚动条的滚动距离相关推荐

vue3 计算滚动条的滚动距离
p1:在 onMounted 钩子函数中,监听滚动条事件(点语法+toRefs) <template><div style="width:3000px;height:300 ...
前端学习——17——获取窗口属性，dom尺寸，让滚动条滚动
一:查看滚动条的滚动距离 1:window.pageXOffset 2:window.pageYOffest (IE8及IE8以下不兼容) <!DOCTYPE html> <html ...
DOM初探（18）——让滚动条滚动
五:DOM基本操作: 让滚动条滚动 window上有三个方法 scroll(x,y),scrollTo(x,y) scrollBy(); 三个方法功能类似,用法都是将x,y坐标传入.即实 ...
DOM初探（17）——查看元素的尺寸与位置
四:DOM基本操作: 查看元素的尺寸: dom.offsetWidth,dom.offsetHeight(视觉上的宽高,不可能包含margin) 查看元素的位置: dom.offsetLeft,dom ...
获取滚动条滚动距离兼容写法
在chrome中,浏览器的滚动条是属于body的,可以通过 document.body.scrollTop来获取垂直滚动距离, document.body.scrollLeft来获取水平滚动距离, 火 ...
Android 仿拼多多可水平滚动RecyclerView,自定义滚动条滚动距离
Android 仿拼多多可水平滚动RecyclerView,自定义滚动条滚动距离 2020年,希望大家一切平安如意,毕竟这是个出人意料的多事之秋. 一.效果图: 二.快速实现: 1.主函数代码: im ...
利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置
利用js获取滚动条滚动距离,实现图片固定在屏幕的某个位置思路: 1.获取对象距离顶部和左侧的距离: 2.获取元素对象: 3.当滚动条滚动时获取滚动条滚动的距离: 4.滚动条滚动时执行函数:对象距离顶 ...
DOM初探（15）——查看视口的尺寸
视频:https://ke.qq.com/course/231577?taid=3983676656552089 二:DOM基本操作: 查看视口的尺寸 window.innerWidth/innerH ...
DOM初探（16）——查看元素的集合尺寸
三:DOM基本操作: 查看元素的集合尺寸 domEle.getBoundingClientRect(); 兼容性很好改方法返回一个对象,对象里面有left,top,right,bottom等属性.l ...

DOM初探（14）——查看滚动条的滚动距离

DOM初探（14）——查看滚动条的滚动距离相关推荐

最新文章

热门文章