我正在处理要在浏览器中阅读的epub文件格式。 使用CSS列我可以根据窗口高度将内容划分为多个列（多个页面）。 使用下一个/上一个按钮，我将执行translateX 。
我的问题是关于分页。我该如何确定：
浏览器中针对特定电子书的列总数，我将其用作总页数。
当前列在视口中可见，我将其用作当前页面位置。
如果CSS列不适合这种情况，你可以建议我采取更好的方法。
编辑：我将epubs渲染为可重排的内容（动态分页）。
谢谢！
答案 0 :(得分：4)
更好的方法是生成自己的列。
查看我的jsfiddle demo，其使用lib_columns.js，jquery.js和jquery.easyPaginate.js。
有关easyPaginate.js的更多信息，请参阅website。
有关lib_columns.js的更多信息，请参阅website。
<强> CSS
<style type="text/css">
html, body { overflow: hidden; height: 100%; }
/* Hide the source containers, by visual only. */
#divSizer, #content {
visibility: hidden;
position: absolute;
left: -9999px;
}
/* E-book */
.ebook-container {
position: relative;
background: #CCC;
}
#ebook {
/*width: 300px; (generated by JavaScript) */
/*height: 500px; (generated by JavaScript) */
margin: 0 auto;
border: 4px dashed red;
/*overflow: auto; (Provide scrollbar) */
}
/* Pagination Menu */
.ebook-container .easyPaginateNav {
position: absolute;
bottom: -2em;
width: 100% !important;
text-align: center;
}
.ebook-container .easyPaginateNav a { padding: 5px; }
.ebook-container .easyPaginateNav a.current { font-weight: bold; }
/* Show only the current page in pagination, hide the rest. */
.ebook-container .easyPaginateNav a.page { display: none; }
.ebook-container .easyPaginateNav a.page.current { display: inline; }
/* Text-size Menu */
.ebook-container .textSizeNav {
position: absolute;
bottom: -70px;
width: 100%;
text-align: center;
}
</style>
<强> HTML
<body style="font-size: 1.4em;">
<div id="divSizer"></div>
<div id="content">
<h2>7.1 Introduction to media types</h2>
<p>One of the most important features of style sheets is that they
specify how a document is to be presented on different media: on the
screen, on paper, with a speech synthesizer, with a braille device,
etc.</p>
<h3>Features of Style Sheets</h3>
<p>Certain CSS properties are only designed for certain media (e.g.,
the 'cue-before' property for aural user agents).
On occasion, however, style sheets for different
media types may share a property, but require different values for
that property. For example, the 'font-size' property is useful both
for screen and print media. However, the two media are different
enough to require different values for the common property; a document
will typically need a larger font on a computer screen than on paper.
Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.</p>
<h4>Features of Style Sheets</h4>
<p>One of the most important features of style sheets is that they
specify how a document is to be presented on different media: on the
screen, on paper, with a speech synthesizer, with a braille device,
etc.</p>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.</p>
<h4>Document to be Presented</h4>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. However,
the two media are different enough to require different values for the
common property</p>
<p>Certain CSS properties are only designed for certain media (e.g.,
the 'cue-before' property for aural user agents).
On occasion, however, style sheets for different.</p>
<h4>Features of Style Sheets</h4>
<p>One of the most important features of style sheets is that they
specify how a document is to be presented on different media: on the
screen, on paper, with a speech synthesizer, with a braille device,
etc.</p>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.</p>
<h4>Document to be Presented</h4>
<p>Experience also shows that sans-serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. However,
the two media are different enough to require different values for the
common property</p>
<p>Certain CSS properties are only designed for certain media (e.g.,
the 'cue-before' property for aural user agents).
On occasion, however, style sheets for different.</p>
</div>
<div class="ebook-container">
<div id="ebook"></div>
<div class="textSizeNav">
<button id="plustext" class="btn btn-circle" onclick="resizeText(1); $(window).resize();">A<sup><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></sup></button>
<button id="minustext" class="btn btn-circle" onclick="resizeText(-1); $(window).resize();"><small>A</small><sup><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></sup></button>
</div>
</div>
<script src="https://cdn.rawgit.com/dpup/13thparallel.com/master/static/archive/column-script/lib_columns.j"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://st3ph.github.io/jquery.easyPaginate/js/jquery.easyPaginate.js"></script>
<script src="jquery.easyPaginate.func.my_paginate.js"></script>
<script src="my_app.js"></script>
</body>
JAVASCRIPT - jquery.easyPaginate.func.my_paginate.js
<!-- jquery.easyPaginate.func.my_paginate.js -->
<script>
function my_paginate(book_selector, content_selector, params)
{
// Override default options.
params = $.extend({
pageWidth: 300,
pageHeight: 500,
earlyCutOff: 0,
paginateElement: 'div',
elementsPerPage: 1,
effect: 'default', // Choose: 'fade', 'slide', or 'climb'
prevButtonText: '<',
firstButtonText: '<<',
nextButtonText: '>',
lastButtonText: '>>'
}, params);
// If content container is empty, then break.
var content = $(content_selector);
if (content.length == 0) return;
// Reset easyPaginate:
// - Check if pagination already exists.
// - Remove pagination, and clear the e-book container.
var sel = '.easyPaginateNav';
var pagination = $(book_selector).parent().children(sel);
if (pagination.length > 0) {
pagination.first().remove();
$(book_selector).html('');
}
// Generate pages. (splits the content)
// Note: All pages will have:
// - class="page"
// - data-page-num="*"
var cols = Columns.splitText(
content.html(),
params.pageWidth,
(params.pageHeight - params.earlyCutOff) // Sometimes too long.
);
for (var i = 0; i < cols.length; i ++)
{
$(book_selector).append(
'<' + params.paginateElement +
' class="page"' +
' data-page-num="' + (i + 1) + '"' +
'>' +
cols[i] +
'</' + params.paginateElement + '>'
);
}
// Prepare the e-book container.
var book = $(book_selector);
book.css('width', params.pageWidth + 'px');
book.css('height', params.pageHeight + 'px');
// Generate/render E-book.
book.easyPaginate({
paginateElement: params.paginateElement,
elementsPerPage: params.elementsPerPage,
effect: params.effect,
prevButtonText: params.prevButtonText,
firstButtonText: params.firstButtonText,
nextButtonText: params.nextButtonText,
lastButtonText: params.lastButtonText
});
}
</script>
JAVASCRIPT - my_app.js
<!-- my_app.js -->
<script>
// When document is ready.
$(function() {
// When the screen size/dimensions changes:
$(window).on("resize", function() {
// Current screen size.
var width = $(window).width() - 150; // 150px gutter.
var height = $(window).height() - 125; // 125px gutter.
// Render e-book.
my_paginate('#ebook', '#content', {
pageWidth: width,
pageHeight: height,
prevButtonText: '<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>',
firstButtonText: '<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>',
nextButtonText: '<span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>',
lastButtonText: '<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>',
earlyCutOff: 50
});
}).resize(); // Force trigger a resize event.
});
</script>
JAVASCRIPT - 额外
<script>
function resizeText(multiplier) {
if (document.body.style.fontSize == "") {
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
</script>
<强>评论
使用CSS列（通过＆＃34;列：＆＃34;属性）会很困难，因为这些列是由CSS生成的，而不是HTML。
使用HTML（标记），然后我们在DOM中创建列，因此可以更好地与它们进行交互和操作。
然后使用jQuery等JavaScript库与列进行交互并对其进行操作。