让阅读无缝衔接 —— JS 获取用户阅读进度
JS 获取 用户 无缝 阅读 进度 衔接
2023-06-13 09:16:21 时间
前言
很多博客中最常见的问题就是:文章很长,但是读者很忙。下次阅读的时候,可能要花一些时间才能恢复到先前的阅读位置。
如果可以设备间,识别二维码或是一个链接就可以让阅读无缝衔接,直接跳转到相应位置,那么阅读体验就会变得更加优秀。
那么,开始吧!
实践
要知道阅读位置,那么就要知道当前页面的坐标。
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
// getScollPosition().x => 页面横坐标; getScrollPosition().y => 页面纵坐标;
大部分情况下,我们只用关注纵坐标。横坐标大概率为 0
。
我们还需要一个页面滚动的事件,用于记录当前坐标,并储存在临时存储中。
至于为什么是 sessionStorage
而不是 localStorage
,则是因为 localStorage
除手动清除外,不会自动过期。
// 此处的 750 是「页面元素的最大宽度」
var wx = window.innerWidth >= 750 ? 750 : window.innerWidth;
var wy = window.innerHeight;
function windowScroll() {
// 反复修改 确保页面尺寸不改变
wx = window.innerWidth >= 750 ? 750 : window.innerWidth;
wy = window.innerHeight;
let y = Math.round(getScrollPosition().y);
// 组合字符串,同时记录页面坐标,页面宽度和高度
let p = `${y}:${wx}:${wy}`;
// 写入到 sessionStorage 中
sessionStorage.setItem("read_y", p);
}
window.onscroll = windowScroll;
你可能发现了,此处的变量 p
,并不仅仅是「页面纵坐标」,而是「页面高度」与「纵坐标」的组合字符串。
事实上,如果单纯是纵坐标判断位置,那么在不同高度,不同宽度的设备上,就会出现错位的情况。而同时记录三个信息,就可以还原真实坐标。
// URL 中是否包含传递的坐标信息
if (location.hash.split("#read=").length > 1) {
// 分离字符串
let read_y = location.hash.split("#read=")[1];
read_y = read_y.split(":");
// 组合乘积,顺滑移动至坐标
window.scrollTo({top: Math.round(Number(read_y[0]) * Number(read_y[1] * Number(read_y[2] / wx / wy))), behavior: "smooth"});
} else {
// 从 sessionStorage 中获取
let read_y = sessionStorage.getItem("read_y") || "0:0:0";
read_y = read_y.split(":");
window.scrollTo({top: Math.round(Number(read_y[0]) * Number(read_y[1] * Number(read_y[2] / wx / wy))), behavior: "smooth"});
}
到现在,我们已经完成了 URL 的解析和基本生成。
那么,URL 即为:
`${location.protocol}//${location.hostname}${location.port ? ":"+location.port:location.port}${location.pathname}#read=${sessionStorage.getItem("read_y")}`;
最后
搭配生成二维码等插件效果更佳。
Miracle 主题将在下个版本中更新该功能。
相关文章
- js获取当前时间的方法_c获取当前时间毫秒
- 前端js手写面试题汇总(二)
- JS控制全屏,监听退出全屏事件
- 解决eclipse在修改js卡顿现象
- js获取文本框的内容
- js 图片闪动,间隔几分钟闪动一下详解编程语言
- JS中获取session中传过来的值对象详解编程语言
- JS offsetParent属性:获取最近的上级定位元素
- JS获取元素的宽度和高度
- 使用JS实现Redis数据读取(js读取redis)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- Oracle中使用JS变量管理数据(oracle使用js变量)
- 可以用来搜索当前页面内容的js代码
- js预载入和JavaScriptImage()对象使用介绍
- js获取坐标通过JS得到当前焦点(鼠标)的坐标属性
- js关闭当前页面(窗口)的几种方式总结
- js获取class的元素的方法以及创建方法getElementsByClassName
- JS获取并操作iframe中元素的方法
- JS操作select下拉框动态变动(创建/删除/获取)
- 使用js获取地址栏中传递的值
- 简约JS日历控件实例代码
- JS实现Enter键跳转及控件获得焦点
- 通过js获取div的background-image属性
- JS获取键盘上任意按键的值(实例代码)
- js控制淡入淡出示例代码
- js获取url参数代码实例分享(JS操作URL)
- js日期对象兼容性的处理方法
- js基本ajax写法示例代码
- JS实现静止元素自动移动示例
- Js+Jq获取URL参数的集中方法示例代码
- node.js中的http.request方法使用说明
- js对象的复制继承实例
- js实现从数组里随机获取元素
- Node.js中使用事件发射器模式实现事件绑定详解