Нахождение первого слова, которое браузеры классифицируют как переполнение

Question

Я ищу, чтобы создать страницу, которая не имеет прокрутки, и узнает, где содержимое основного div переполнено. Код запомнит эту точку и создаст отдельную страницу, которая начинается с этого слова или элемента.

Я потратил несколько часов, и вот подходы, которые используют прошлые вопросы:

1. Клонируйте div, постепенно удаляйте слова, пока высота / ширина клона не станут меньше, чем у оригинала.
Слишком медленно. Полагаю, я мог бы ускорить его, экспоненциально обрезая слова, а затем медленно заполняя его обратно - бегая мимо цели, затем медленно возвращаясь назад, пока я точно не ударил ее - но сам подход кажется своего рода грубой силой.

2. Сделайте математику с размерами div, подсчитайте, сколько ems поместится по горизонтали и вертикали. Было бы хорошо, если бы все содержимое было единообразным текстом, а именно книгой, но я ожидаю разобраться с заголовками, изображениями и еще чем-то, что в этот раз бросает гаечный ключ. Также усложняется различными настройками шрифтов по умолчанию в браузерах (100%? 144%?)

3. Отображать элементы как токены, останавливаться, когда рассматриваемый элемент (т.е. один символ) больше не виден пользователю на экране. Это был бы мой предпочтительный подход, поскольку он просто включал бы какую-то проверку isVisible() на визуализированных элементах. Я не знаю, согласуется ли это с тем, как браузеры выбирают рендеринг.

Любые рекомендации о том, как это может быть сделано? Или браузеры предназначены для отображения всей длины страницы, прежде чем решить, нужна ли полоса прокрутки?

Answer 1

Вместо клонирования DIV, вы могли бы просто иметь overflow:hidden разделить и установить div.scrollTop += div.height каждый раз, когда вам нужно продвинуть "страницу". (Даже если браузер не будет отображать полосу прокрутки, вы все равно можете программно вызвать прокрутку div.)

Таким образом, вы позволяете браузеру обрабатывать то, для чего он предназначен (поток контента).

Вот фрагмент, который будет автоматически перемещаться по страницам: (демо)

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);

Вы также можете поиграть, чтобы убедиться, что "страница" не начинается в середине элемента уровня блока, если вы не хотите (например) заголовки разрезать пополам. К сожалению, будет гораздо сложнее (возможно, невозможно) убедиться, что строка текста не будет разрезана пополам.