时间戳

首页 > 解决方案 > 用户停止阅读时获取点

javascript - 用户停止阅读时获取点

问题描述

用户 A 上了我的在线杂志。她开始阅读一篇很长的文章，然后在文章中间她决定停下来。她关闭了浏览器，几个小时后才回到该站点。现在，当她再次打开同一篇文章时，我希望页面从她离开的地方开始。

Imaging User A其实是一个注册用户，我该如何实现呢？更具体地说，我想存储屏幕上第一个可见行的第一个字符的字符号（作为 int ）（基本上是左上角）。

编辑：为了进一步澄清，您可以认为 Instapaper 或 Pocket 等应用程序面临类似问题（移动应用程序和网络应用程序）。

标签： javascript

解决方案

更新的答案

我不确定如何做到这一点。我建议存储使用localStorage.

您可以获得文档在关闭时滚动了多远以及文档的尺寸，如果重新加载时文档的宽度相同，那么您可以滚动到同一点。width * scrollTop如果不是，您可以通过计算读取的体积并将其除以当前宽度来估计用户停止的点。

这是一个伪代码，可帮助您理解该概念：

if oldWidth == currentWidth
    set scroll = oldScroll
else
    set scroll = oldScroll * oldWidth / currentWidth

这是上述伪代码的 JavaScript 示例，但首先需要注意一些事项：

  • localStorage不允许在片段上使用，因此当前代码在此处不起作用，如果要测试，则必须将其复制到其他地方
  • 该leavePage()方法return null的末尾有一个语句，这是因为某些浏览器不会运行没有返回语句的函数beforeunload

if (document.readyState === "complete") enterPage();
else addEventListener("load", enterPage);
addEventListener("beforeunload", leavePage);

function enterPage() {
  var magazineDom = document.querySelector("#magazine");
  if (magazineDom instanceof HTMLElement) {
    magazineDom.textContent = "Lorem Ipsum".repeat(800);
    //onRender();
  }
}

function onRender() {
  var magazineContainerDom = document.querySelector("#magazine-container");
  var magazineDom = document.querySelector("#magazine");
  if (magazineContainerDom instanceof HTMLElement && magazineDom instanceof HTMLElement) {
    var info = getMagazineInfo(magazineDom.getAttribute("magazine"));
    if (info) {
      var currentWidth = magazineDom.scrollWidth;
      if (currentWidth == info.width) magazineContainerDom.scrollTop = info.top;
      else magazineContainerDom.scrollTop = info.top * info.width / currentWidth;
    }
  }
}

function leavePage() {
  var magazineContainerDom = document.querySelector("#magazine-container");
  var magazineDom = document.querySelector("#magazine");
  if (magazineContainerDom instanceof HTMLElement && magazineDom instanceof HTMLElement) {
    setMagazineInfo(magazineDom.getAttribute("magazine"), magazineContainerDom.scrollTop, magazineDom.scrollWidth);
  }
  return null;
}

function getMagazineInfo(name) {
  return JSON.parse(localStorage.magazines || "{}")[name];
}

function setMagazineInfo(name, top, width) {
  var magazines = JSON.parse(localStorage.magazines || "{}");
  magazines[name] = {
    top: top,
    width: width
  };
  localStorage.magazines = JSON.stringify(magazines);
}
body {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#magazine-container {
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

#magazine {
  max-width: 500px;
  margin: auto;
}
<body>
  <div id="magazine-container">
    <div id="magazine" magazine="First Document">

    </div>
  </div>
</body>

推荐阅读