让文章阅读进度无缝衔接 - Jdeal

翻浏览器收藏夹的时候，就像翻旧箱子找宝贝一样，找到一篇老早存起来的文章，叫《让阅读无缝衔接——JS 获取用户阅读进度》。这名字听起来可能有点专业，但说白了，就是教你怎么让你的网站文章变得超贴心~

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

想象一下，你正在网上看个长篇大论，正看得津津有味呢，突然，哎呀，有事得走开一下，或者手机快没电了，不得不先把网页关掉。这时候，你心里肯定特希望下次再打开这文章的时候，能直接跳到刚才看到的地方接着看，对吧？

这篇文章就是教你设置这么个神奇功能。它能记住你读到哪儿了，哪怕你关了网页、换了电脑甚至换到手机上看，都能把你精准送回上次阅读的位置，无缝对接，就像你从未离开过一样。多省心，多方便！

虽然文章里讲的方法稍微带点技术味儿，什么“JS”啊、“坐标”啊，还有“URL 生成二维码”之类的，但其实思路挺简单。就是想办法算出你看到哪一行、哪一屏，然后把这个位置信息存起来。下次你再来，网站就知道该从哪儿开始展示文章，让你接着读。

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

// 定义获取滚动位置的函数
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() {
    // 更新窗口尺寸（如果发生变化），自行修改最大屏幕像素 750
    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，可用于复制或生成二维码

当然啦，实际操作的时候，还要考虑一些小细节，比如手机和电脑滚动网页的方式不太一样，得分别处理好。再比如，频繁记录阅读位置可能会有点耗资源，所以可能还得写点节流，不让电脑或手机觉得卡卡的。

总结一下，这就是个挺实用、挺有趣的网站小功能，能让长文阅读体验升级，告别断点续读的烦恼。虽然我自己可能用不太上。~~（毕竟我不喜欢看长文章，哈哈）~~