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

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

1 голос
/ 26 января 2012

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

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

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

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

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

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

1 Ответ

2 голосов
/ 26 января 2012

Вместо клонирования div, вы можете просто иметь overflow:hidden div и устанавливать 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);

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

...