利用本地存储,记录滚动条的位置
在一定时间范围内,用手机微信打开之前浏览过的订阅号的文章,文章显示出来的是你上次阅读到的位置,而不是从头开始显示。手机微信是怎么知道你文章阅读的位置?前端工程师能否实现该功能?
本文主要内容:
1、功能介绍
2、功能分析
3、知识要点
4、具体实现
5、总结
1、功能介绍
为了让大家更清楚的知道今天要学习的效果,先一起来体验一下吧。我们先在手机微信打开HTML5学堂订阅号中的文章,当文章浏览到某一个位置的时候点击左上角返回,然后再次点击刚刚浏览过的那篇文章,显示出来的是你刚才阅读到的位置,而不是从头开始显示,这个用户体验是不是觉得很赞。
效果:
2、功能分析
这个功能的实现并不是很难,当页面滚动时记录页面滚动条的位置并保存到本地存储里面,当你再次打开页面的时候读取本地存储里面的值来设置页面滚动条的位置。具体我们来分析一下。
分析:
1、监听页面滚动条的状态(是否滚动)
2、滚动时获取页面滚动条的位置
3、滚动条的位置保存到本地存储里面
4、页面每次加载的时候获取本地存储里面的值
5、获取到的值来设置页面滚动条的位置
3、知识要点
1、监听页面滚动条的状态(是否滚动)
浏览器监测到滚动条发生滚动时,就会触发scroll事件。
<script type="text/javascript">
window.addEventListener('scroll', function() {
console.log('滚动条滚动了');
}, false);
</script>
tips:页面需要有一定的内容才能出现滚动条,否则触发不了scroll事件。
2、滚动时获取页面滚动条的位置
代码中解决了获取滚动条位置的兼容问题。
<script type="text/javascript">
window.addEventListener('scroll', function() {
// 获取滚动条的位置
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(sTop);
}, false);
</script>
3、滚动条的位置保存到本地存储里面
使用本地存储的setItem方法设置本地存储的值。
<script type="text/javascript">
var ls = window.localStorage;
ls.setItem('sTop', 200);
</script>
4、页面每次加载的时候获取本地存储里面的值
先判断本地存储里面是否有记录过页面滚动条的值,如果有则获取本地存储的值,否则不进行操作。
<script type="text/javascript">
var ls = window.localStorage;
if (ls.getItem('sTop')) {
console.log(ls.getItem('sTop', 200));
} else {
console.log('抱歉,找不到滚动条的值');
}
</script>
5、获取到的值来设置页面滚动条的位置
跟获取滚动条位置一样处理了浏览器兼容问题。
<script type="text/javascript">
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = 200;
} else {
document.body.scrollTop = 200;
}
</script>
4、具体实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5Course - 利用本地存储,记录页面浏览器的位置</title>
<link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset.css" />
<style type="text/css">
.wrap {
padding: 15px 0;
max-width: 640px;
margin: 0 auto;
}
.wrap > h2 {
padding: 10px 0;
color: #39f;
font-size: 24px;
}
.wrap > p {
line-height: 40px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="wrap">
<h2>HTML5学堂官网</h2>
<p>HTML5学堂,致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料,也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师(利利和堡堡)创建,当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中,主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里,将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站,为您提供最适合您的信息。</p>
<h2>HTML5学堂微信</h2>
<p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识,也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造,或许这里没有最牛的技术,但却将HTML5最浅显易懂的表达了出来。</p>
<h2>摩登足迹微信号</h2>
<p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
<h2>HTML5学堂官网</h2>
<p>HTML5学堂,致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料,也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师(利利和堡堡)创建,当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中,主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里,将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站,为您提供最适合您的信息。</p>
<h2>HTML5学堂微信</h2>
<p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识,也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造,或许这里没有最牛的技术,但却将HTML5最浅显易懂的表达了出来。</p>
<h2>摩登足迹微信号</h2>
<p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
<h2>HTML5学堂官网</h2>
<p>HTML5学堂,致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料,也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师(利利和堡堡)创建,当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中,主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里,将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站,为您提供最适合您的信息。</p>
<h2>HTML5学堂微信</h2>
<p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识,也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造,或许这里没有最牛的技术,但却将HTML5最浅显易懂的表达了出来。</p>
<h2>摩登足迹微信号</h2>
<p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
</div>
<script type="text/javascript">
var ls = window.localStorage;
// 页面每次加载的时候获取本地存储里面的值
if (ls.getItem('sTop')) {
var oldStop = ls.getItem('sTop');
// 获取到的值来设置页面滚动条的位置
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = oldStop;
} else {
document.body.scrollTop = oldStop;
}
} else {
console.log('抱歉,找不到滚动条的值');
}
// 监听页面滚动条的状态(是否滚动)
window.addEventListener('scroll', function() {
// 滚动时获取页面滚动条的位置
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
// 滚动条的位置保存到本地存储里面
ls.setItem('sTop', sTop);
}, false);
</script>
</body>
</html>
效果:
5、总结
利用本地存储,记录滚动条的位置,主要涉及了两个主要技术点,一个点是滚动条的操作,另外一个点是本地存储的操作。其实,这个功能还可以扩展到Tab切换里面,记录用户点击了哪一个Tab项,下次打开的时候显示上次打开的Tab项。
- 通过扩展让ASP.NET Web API支持JSONP
- ASP.NET Web API自身对CORS的支持:从实例开始
- Generator:化异步为同步
- 超详细的大数据学习资源推荐(下)
- 中国大数据行业发展现状及趋势预测
- 【腾讯云的1001种玩法】十分钟轻松搞定云架构 · 负载均衡的几种类型
- 常用的Hadoop 文件查看工具
- 机器学习之——LINE及LargeVis可视化算法
- 开发人员看测试之细说JBehave
- 智能合约中存在的3种最常见的误解
- O'ReillyAI系列:将学习速率可视化来优化神经网络
- 再下一城,腾讯黑科技介入新零售
- 微信团队广发内部体验邀请,小程序将大火!
- 胖虎科技获1亿元融资 域名“我爱胖虎”创意十足!
- 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 数组属性和方法
- 需要了解的Python编码解码知识
- 程序员必备技能之markdown写作
- Python列表操作最全面总结
- Python 0基础开发游戏:打地鼠(详细教程)VS code版本
- Python经典编程题:字符串替换
- Python字典操作总结
- 纯代码系列:Python实现验证码图片(PIL库经典用法用法,爬虫12306思路)
- Python正则表达式快速学习
- 如何上传项目到GitHub
- MySQL查询优化-基于EXPLAIN
- Python操作SQLite数据库
- Python多进程及多线程基础
- Python字符串三种格式化输出
- 你需要知道的Python代码规范性检查(pylint和flake8)
- Linux下安装python环境