javascript - 找到浏览器将分类为溢出的第一个词

Question

我希望构建一个没有滚动的页面，并且可以识别主 div 内容溢出的位置。代码会记住这一点并构建一个以该词或元素开始的单独页面。

我花了几个小时摆弄，这是过去的问题所采用的方法:

1。克隆 div，逐渐删除单词，直到克隆的高度/宽度小于原始的。
太慢了。我想我可以通过按指数方式剥离单词然后慢慢填充它来加快它的速度——跑过目标然后慢慢回溯直到我准确地击中它——但这种方法本身似乎有点蛮力。

2。对 div 的尺寸进行数学计算，计算出水平和垂直适合多少个 em。如果所有内容都是统一的文本就好了，就像一本书一样，但我希望处理标题和图像以及诸如此类的东西，这会给这本书带来麻烦。浏览器不同的默认字体首选项也很复杂(100%？144%？)

3。将元素呈现为标记，当相关元素(即一个字符)在屏幕上对用户不再可见时停止。这是我的首选方法，因为它只涉及对渲染元素进行某种 isVisible() 检查。不过，我不知道它是否与浏览器选择呈现的方式一致。

关于如何完成这件事有什么建议吗？或者浏览器是否设计为在决定是否需要滚动条之前呈现整个页面长度？

Answer 1

不是克隆 div，您可以只拥有一个 overflow:hidden div 并在每次需要推进一个 '页'。 (即使浏览器不显示滚动条，您仍然可以通过编程方式使 div 滚动。)

这样，您就可以让浏览器处理它设计要做的事情(内容流)。

下面是一个会自动浏览页面的片段:(demo)

var div = $('#pages'), h = div.height(), len = div[0].scrollHeight, p = $('#p');
setInterval(function() {
   var top = div[0].scrollTop += h;
   if (top >= len) top = div[0].scrollTop = 0;
   p.text(Math.floor(top/h)+1 + '/' + Math.ceil(len/h)); // Show 'page' number
}, 1000);

如果您不想(例如)将标题切成两半，您还可以做一些调整以确保“页面”不会从 block 级元素的中间开始。不幸的是，要确保一行文本不被切成两半会更加困难(也许是不可能的)。