js中scroll滚动相关
时间:2019-10-02
本文章向大家介绍js中scroll滚动相关,主要包括js中scroll滚动相关使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
js中scroll滚动相关
scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。
一.元素相关
属性/方法 | 解释 |
---|---|
element.scrollHeight | 返回元素的整体高度。 |
element.scrollWidth | 返回元素的整体宽度。 |
element.scrollLeft | 返回元素左边缘与视图之间的距离。 |
element.scrollTop | 返回元素上边缘与视图之间的距离。 |
这四个属性,全部是只读属性
其中,无非就是分为宽高
和左上
。
两个方向。
1.scrollHeight 和 scrollWidth
- 使用scrollHeight和scrollWidth属性返回元素的高度,单位为px,包括padding
- scrollHeight 和 scrollWidth返回的数值是包括当前不可见部分的。
- scrollHeight 和 scrollWidth 属性为只读属性
2.scrollLeft 和 scrollTop
- 需要一个监听方法
- 还存在浏览器兼容问题
二.窗口相关
1.window对象的scrollBy() 和scrollTo()
1.scrollBy(x,y)
scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量。
scrollBy(0, 200) ==> 使得滚动条Y轴的位置,在当前的基础上增加200。比如:当前Y轴位置为0,执行后便是200;当前为100,执行后便是300。
- 要使此方法工作 window 滚动条的可见属性必须设置为true!
2.scrollTo(x,y)
scrollTo(xpos,ypos)
- xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
- ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
scrollTo(x,y)方法:滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的
原文地址:https://www.cnblogs.com/pythonywy/p/11617664.html
- Dora.Interception, 为.NET Core度身打造的AOP框架[3]:Interceptor的注册
- Dora.Interception, 为.NET Core度身打造的AOP框架:不一样的Interceptor定义方式
- Dora.Interception,为.NET Core度身打造的AOP框架:全新的版本
- ASP.NET Core的路由[4]:来认识一下实现路由的RouterMiddleware中间件
- 浅谈 Java 并发编程中的若干核心技术
- ASP.NET Core的路由[3]:Router的创建者——RouteBuilder
- ASP.NET Core的路由[2]:路由系统的核心对象——Router
- ASP.NET Core的路由[1]:注册URL模式与HttpHandler的映射关系
- 学习ASP.NET Core, 怎能不了解请求处理管道[6]: 管道是如何随着WebHost的开启被构建出来的?
- 学习ASP.NET Core, 怎能不了解请求处理管道[5]: 中间件注册可以除了可以使用Startup之外,还可以选择StartupFilter
- 学习ASP.NET Core, 怎能不了解请求处理管道[4]: 应用的入口——Startup
- 学习ASP.NET Core, 怎能不了解请求处理管道[3]: 自定义一个服务器感受一下管道是如何监听、接收和响应请求的
- .NET Core多平台开发体验[4]: Docker
- .NET Core多平台开发体验[3]: Linux (Windows Linux子系统)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一路踩坑构建Dubbo源码
- vue引入echarts实现数据可视化
- 【七夕特殊礼物】Dubbo学习之SPI实战与debug源码
- Spring学习之浅析refresh()执行逻辑
- vue-lazyload实现图片懒加载
- Python教程之粒子运动轨迹动态绘图
- BFE.dev前端刷题11 - 什么是composition?实现一个pipe()方法
- SSH整合主要XML代码
- struts标签中的select
- 通过反射技术获取泛型真实实例
- 使用POI操作Excel
- StrutsResultSupport的使用
- QueryHelper插件类(hql)
- Action中使用Json
- Spring 集成Quartz