让文章阅读进度无缝衔接

55天前411

整理浏览器收藏夹时,发现了一篇以前收藏的文章,这个想法还蛮有趣的,所以整理记录下。

原文链接:让阅读无缝衔接 —— JS 获取用户阅读进度

其实该功能主要是解决:当你网站文章过长用户关闭页面中断阅读后,再次打开时可跳转到之前阅读的相应位置;暂时离开电脑时可快速跨设备继续阅读等。

根据作者的原文,可以看到其实步骤不算很复杂,但是这想法确实很有趣,简单复现了下,如下:

// 定义获取滚动位置的函数
const getScrollPosition = (el = window) => ({
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

// 初始化页面宽度和高度变量
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;

// 检查 URL 是否包含传递的阅读位置信息
if (location.hash.split("#read=").length > 1) {
    // 分离出存储的坐标信息
    let read_y = location.hash.split("#read=")[1].split(":");
    
    // 计算实际滚动位置并顺滑滚动至该位置
    let targetY = Math.round(Number(read_y[0]) * Number(read_y[1]) * Number(read_y[2]) / wx / wy);
    window.scrollTo({top: targetY, behavior: "smooth"});
} else {
    // 如果 URL 中没有,则从 sessionStorage 中尝试获取
    let storedReadY = sessionStorage.getItem("read_y") || "0:0:0";
    let read_y = storedReadY.split(":");
    
    // 同样计算并滚动到之前保存的位置
    let targetY = Math.round(Number(read_y[0]) * Number(read_y[1]) * Number(read_y[2]) / wx / wy);
    window.scrollTo({top: targetY, behavior: "smooth"});
}

// 创建一个可复用的方法,用于生成带有阅读位置的 URL
function generateReadingPositionUrl() {
    // 获取当前保存在 sessionStorage 中的阅读位置
    let currentPosition = sessionStorage.getItem("read_y");

    // 根据当前位置构建 URL
    let url = `${location.protocol}//${location.hostname}${location.port ? ':' + location.port : ''}${location.pathname}#read=${currentPosition}`;

    return url;
}

// 示例:使用 generateReadingPositionUrl 方法生成链接
let currentUrlWithPosition = generateReadingPositionUrl();
console.log(currentUrlWithPosition); 
// 打印带有阅读位置的 URL,可用于复制或生成二维码

根据上述代码基本上就能输出带坐标的地址了,当然你也可以简单做个 URL 生成二维码,用于跨设备继续阅读。

不过注意下,上面的代码是假设了页面元素的最大宽度固定为 750px,自己可以自行修改。同时,在实际应用中,可能还需要考虑其他因素,比如移动端与桌面端不同的滚动行为以及节流等。

总之一句话:有趣的小功能,哈哈。(虽然我用不到,手动狗头)

* 若非特殊说明,本站文章均为博主原创,码字不易,如需转载,请注明出处!有疑问可留言交流,谢谢。

Javascript分享12 

让文章阅读进度无缝衔接 - Jdeal | Life is like a Design.