让文章阅读进度无缝衔接

161天前2273

翻浏览器收藏夹的时候,就像翻旧箱子找宝贝一样,找到一篇老早存起来的文章,叫《让阅读无缝衔接——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,可用于复制或生成二维码

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

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

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

Javascript分享13 

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