Javascript-форум - Полноэкранный букридер / Пагинация текста

Javascript-форум (https://javascript.ru/forum/)

- Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)

- - Полноэкранный букридер / Пагинация текста (https://javascript.ru/forum/library-toolkit-framework/35680-polnoehkrannyjj-bukrider-paginaciya-teksta.html)

Такой вопрос, для общего развития
Есть длинный хтмл текст
<div class="wrapper"><div class="text">
Long time ago...
</div></div>

wrapper = fixed, 100%, 100%, overflow:hidden;

Пишу скрипт, который
Берет высоту wrapper (800)

Делаем для text отступ (margin-top:-800) - получаем вторую страницу.
При каждом нажатии на стрелки увеличиваем или уменьшаем margin-top на высоту wrapper, двигаемся по страницам.

При ресайзе окна вставляю на верхнюю строку на экране (текущий отступ / 20) div c якорем, выясняю на какой строке якорь, делаю отступ.

Что я упустил?

ксать забавно, если wrapper = fixed, 100%, 100%;overflow-y:hidden;
То возможно можно скрыто ресайзить и в оверлее, контент вне окна

а как выбрать нпр 120 и 160 строку текста и окружить все между ними в <div></div>?

coventgarden,
Хм... а что строки уже в тегах ? Лучше изначально засунуть весь контент в storage, скопировать в переменную.
Из переменной(типо стек) заполняем поблочно ( допустим блоками по 300 cимволов), коли высота <div> cтала больше положенной, последний блок удаляем и пихаем его посимвольно, - остаток символов снова в стек, в storage помечаем - вставляем невидимый разделитель для очередной созданной страницы

может быть посмотреть как в популярных online читалках сделано?

Вот тут cхоже по теме: (пример из топика http://javascript.ru/forum/misc/3583...j-verstke.html
Контроль изменения высоты любого из span, как критерий перехода в новыю колонку( новый span), либо еще каких-нибудь действий

(Закидываем в один из span контент больше максимально-допустимой его высоты

<!DOCTYPE>
<html>
<head>

</head>
<body>

<style>
html, body, div{height: 100%;margin:0;padding:0;}
.wrp span{
    margin: 0;
    vertical-align: top;
    display: inline-block;
    white-space:pre-wrap;
    word-wrap: break-word;
    min-height: 200px;
    max-height: 202px;
    width:200px;
    border: 1px solid red;
}
.wrp{
    position:absolute;
    border: 1px solid blue;
    white-space:nowrap;
    padding:0;
    height: auto;


}
</style>
<div class=wrp><iframe name="frame" width="88"  height="100%" style="margin:0;position:absolute;border:green solid 1px;/*z-index:-1*/"></iframe>
    <span></span>
    <span></span>
    <span id=third></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<script type="text" id="scr00">
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв 
</script>
<script type="text/javascript">
setTimeout(function(){ // Отработка задержки фрейма (для FF и ИЕ)
   var timerResize='first';
   frame.onresize = function(){ // frame,  - Имя фрейма (name=frame)  - cм начало Кода;
     if(timerResize!=='first')clearTimeout(timerResize);
     timerResize=setTimeout( function(){  //  Задержка для очистки  чрезмерных срабатываний;
         alert('Высота div class=wrp изменена.'); // Тело обработки события «onresize»;

     },20)  // Параметр 20(ms) , - зависит от нужной скорости реагирования на повторные события;
            // актуально при плавных изменениях размера элемента,   
            // либо почти одновременное изменением размера несколькими разными процессами.
  }
},200);


setTimeout(function(){  //Докидываем контент в третий span 
  document.getElementById("third").innerHTML=document.getElementById("scr00").innerHTML;
},7000);

</script>


</body>
</html>

Deff реально больной...

danik.js, - реально
Задрал, если пишу, не для тебя, помимо есть люди