当前位置:网站首页>DOM系列之scroll系列
DOM系列之scroll系列
2022-07-31 00:35:00 【老__L】
1、scroll概述
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
2、scroll系列属性
3、页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
4、页面被卷去的头部兼容性解决方案
需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:
- 声明了 DTD,使用
document.documentElement.scrollTop
- 未声明 DTD,使用
document.body.scrollTop
- 新方法
window.pageYOffset
和window.pageXOffset
,IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
边栏推荐
- Add text watermark to PHP image
- Jmeter parameter transfer method (token transfer, interface association, etc.)
- 【c语言课程设计】C语言校园卡管理系统
- MySQL database advanced articles
- Consistency and Consensus of Distributed Systems (1) - Overview
- 分布式系统的一致性与共识(1)-综述
- ELK deployment script---pro test available
- what is jira
- ABC 261 F - Sorting Color Balls (reverse pair)
- Asser uses ant sword to log in
猜你喜欢
如何在WordPress网站上添加导航菜单
正则表达式密码策略与正则回溯机制绕过
数据库的严格模式
神经网络(ANN)
C language force buckles the rotating image of the 48th question.auxiliary array
MySQL的grant语句
[In-depth and easy-to-follow FPGA learning 14----------Test case design 2]
Jmeter参数传递方式(token传递,接口关联等)
xss靶机训练【实现弹窗即成功】
Encapsulate and obtain system user information, roles and permission control
随机推荐
封装、获取系统用户信息、角色及权限控制
[In-depth and easy-to-follow FPGA learning 15---------- Timing analysis basics]
Error occurred while trying to proxy request The project suddenly can't get up
Jmeter parameter transfer method (token transfer, interface association, etc.)
h264和h265解码上的区别
论文理解:“Designing and training of a dual CNN for image denoising“
What is Promise?What is the principle of Promise?How to use Promises?
How to import game archives in joiplay emulator
Meeting OA project pending meeting, all meeting functions
Steven Giesel recently published a 5-part series documenting his first experience building an application with the Uno Platform.
How to ensure the consistency of database and cache data?
[Yugong Series] July 2022 Go Teaching Course 015-Assignment Operators and Relational Operators of Operators
乌克兰外交部:乌已完成恢复粮食安全出口的必要准备
WEB Security Basics - - - Vulnerability Scanner
过滤器(Filter)
Neural Network (ANN)
【Yugong Series】July 2022 Go Teaching Course 017-IF of Branch Structure
常用的正则表达式
Error occurred while trying to proxy request项目突然起不来了
Steven Giesel 最近发布了一个由5部分内容组成的系列,记录了他首次使用 Uno Platform 构建应用程序的经验。