滚动页面
时间:2022-07-23
本文章向大家介绍滚动页面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
滚动页面。
使用window.scrollBy
指定页面基于当前位置的滚动偏移量
。
正数坐标会朝页面的右下方滚动,负数坐标会滚向页面的左上方。
例子
// 向下滚动一屏
window.scrollBy(0, window.innerHeight);
// 向上滚动一屏
window.scrollBy(0, -window.innerHeight);
扩展阅读
除了接受正负偏移量
,window.scrollBy
还能接受ScrollToOptions
作为配置。
ScrollToOptions
包含如下三个参数:
- top:y轴偏移量
- left:x轴偏移量
- behavior:滚动行为,支持参数:
smooth
(平滑滚动),instant
(瞬间滚动)。默认值auto
,效果等同于instant
ScrollToOptions
可以作为如下方法的配置:
- window.scroll()
- window.scrollBy()
- window.scrollTo()
- element.scroll()
- element.scrollBy()
- element.scrollTo()
接下来介绍其他几个滚动相关API
:
window.scroll
指定页面需要滚动的绝对位置。
window.scroll(x-coord, y-coord)
window.scroll({
top: 100,
left: 100,
behavior: 'smooth'
});
window.scrollTo
与window.scroll
相同。
window.scrollByPages
滚动指定的页数。
该API
仅在Firefox
浏览器支持。
// 当前文档向下翻一页
window.scrollByPages(1);
// 当前文档向上翻一页
window.scrollByPages(-1);
window.scrollByLines
滚动指定的行数。
该API
仅在Firefox
浏览器支持。
// 当前页面向下翻五行
window.scrollByLines(5);
// 当前页面向上翻五行
window.scrollByLines(-5);
- 简单分析oracle的数据存储(r2笔记89天)
- 机器学习线性分类算法:感知器原理
- 通过shell脚本来查看Undo中资源消耗高的sql(r2笔记88天)
- 关于分页查询的优化思路(r3笔记第7天)
- 用机器学习方法对影评与观影者情感判定
- 关于查看文件的几个小命令(r3笔记第6天)
- 关于纠结的recycle pool的设置(r3笔记第5天)
- 融会贯通学习trigger(r2笔记第4天)
- 完整的R语言预测建模实例-从数据清理到建模预测
- 利用回归模型预测数值型数据(代码)
- 关于ORA-00020问题的反思(r2笔记第3天)
- 查看空间使用情况的脚本(r2笔记第2天)
- 使用dbms_parallel_execute来完成DML的并行(r3笔记第1天)
- 有趣的linux命令总结(78天)
- 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 数组属性和方法
- Redis 中的 3 种特殊数据类型
- 关于 “栈” 的那点破事
- 【为宏正名】for的妙用你想不到
- Centos 7 下 docker 导入导出镜像 实践笔记
- linux(centos)搭建.net core 运行环境
- 11g RAC 在线存储迁移实现 OCR 磁盘组完美替换
- MAC下 Centos7 下 免账号免密码便捷登录服务器的正确姿势 实践笔记
- AnimatedList 介绍及使用
- Flutter之SliverAppBar
- OpenGL ES 环境搭建
- Asp.Net Core 程序部署到Linux(centos)生产环境(一):普通部署
- Asp.Net Core 程序部署到Linux(centos)生产环境(二):docker部署
- docker-compose 安装jenkins的正确姿势 实践笔记
- windows安装nginx注册为服务的正确姿势 并设置开机自启 实践笔记
- windows navicat连接oracle11G 自用 实践笔记