我制作bookReader,一页适合用户视口.对于这种方法我做div
<div id="book">Long text...</div>
同
#book {
overflow: hidden
}
然后我提供只用下一个按钮和prev滚动这个元素.当用户单击下一个按钮时,它将像这样滚动
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
但我有问题.有时用户会看到文本行的一部分.如何检查每个页面是否显示最后一个文本行已损坏,如果他被破坏则隐藏它们.我不想改变内容.我需要一个函数来检查每个页面,如果它包含该部分文本,如果这个部分有文本,则通过在顶部元素上隐藏它来隐藏它.
演示:我用红色显示我需要找到和隐藏的东西.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
演示2:它可以包含任何内容(标题标签,img <code>等)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
PS使所有相同line-height的不是解决方案.更改内容样式也不是解决方案.
我正在制作一个图书阅读器网络应用程序。我从服务器得到一个长字符串，其中包含 HTML 格式的所有书籍文本。它看起来像这样：
<div><p>Alice was beginning....</p></div></div>to get very ... </div>
我想要的是将这些文本分成几页。我想得到这样的东西：
<li id='page1'>... text ...</li>
<li id='page2'>... text ...</li>
...
单个页面应填充视口。用户不应该能够滚动书籍文本。相反，他们应该能够使用按钮在页面之间移动。
我需要一些函数来测量所有内容，将其分成相同最大高度的部分，并用页码标记这些部分。它还必须考虑图片和长段落（可能不适合一页）。
我怎样才能完成这一切？