Question

我有一篇很长的HTML纯文字文章，用段落标签格式化。我想要做的是将这些内容分成N个div，以便我可以创建单独的页面。因此，例如，在iPad / iPhone上，用户可以向右/向左滑动以导航到页面，而不是阅读一个长页面。

我最初的javascript尝试有点令人费解：创建文本数组，测量行高，设备窗口高度，添加结束/打开段落标记以及页面的结束/开头。

关于如何做到这一点的好方法的想法？我无法访问服务器端处理，这必须是客户端解决方案。

Answer 1

单击按钮时滚动固定数量的div怎么样？

我在这里使用了YUI，但它很容易翻译。基本上你只需创建一个固定大小的div并在点击时更改它的scrollTop值。

<html><head><script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<style>
    #page {
        border: inset;
        height:400px;
        width:400px;
        overflow:hidden;
    }
</style>
<script>
   (function() {
    var Dom = YAHOO.util.Dom,
        Evt = YAHOO.util.Event;
    var getPageSize = function(){
        return Dom.get('size').value;
    };
    Evt.addListener('Next', "click", function() {
        var page = document.getElementById('page');
        Dom.get('page').scrollTop += getPageSize();
    });
    Evt.addListener('Previous', "click", function() {
        var page = document.getElementById('page');
        Dom.get('page').scrollTop -= getPageSize();
    });
})();
</script></head>
<body><input type='text' id='size' value='50'>
<div id='Next'>Next</div>
<div id='Previous'>Previous</div>
<div id='page'> INSERT LOTS OF TEXT HERE </div></body></html>

将客户端内容分解为多个“页面”的方法

1 个答案: