Ну вот что то такое.
Недостаток - режет строки. Верхняя часть строки на предыдущей странице, нижняя на следующей.
<!DOCTYPE>
<html>
<head>
<style>
#page {
position: relative;
width:300px;
height:600px;
overflow: hidden;
border: 1px solid blue;
padding: 10px;
}
#paginator {
display: flex;
}
</style>
</head>
<body>
<div id=page>
</div>
<div id="paginator"></div>
<script>
const text = `
<h2>Introduction</h2>
<p>This Ecma Standard defines the ECMAScript 2023 Language. It is the
fourteenth edition of the ECMAScript Language Specification.
Since publication of the first edition in 1997, ECMAScript has
grown to be one of the world's most widely used general-purpose programming languages.
It is best known as the language embedded in web browsers but has also been widely adopted
for server and embedded applications.
<p>ECMAScript is based on several originating technologies, the most well-known being
JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan
Eich at Netscape and first appeared in that company's Navigator 2.0 browser.
It has appeared in all subsequent browsers from Netscape and in all browsers
from Microsoft starting with Internet Explorer 3.0.
<p>The development of the ECMAScript Language Specification started in November 1996.
The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.
<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure,
and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General
Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with
ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.
<p>The third edition of the Standard introduced powerful regular expressions,
better string handling, new control statements, try/catch exception handling,
tighter definition of errors, formatting for numeric output and minor changes
in anticipation of future language growth. The third edition of the ECMAScript
standard was adopted by the Ecma General Assembly of December 1999 and published
as ISO/IEC 16262:2002 in June 2002.
<p>After publication of the third edition, ECMAScript achieved massive adoption
in conjunction with the World Wide Web where it has become the programming
language that is supported by essentially all web browsers. Significant work
was done to develop a fourth edition of ECMAScript. However, that work was not
completed and not published as the fourth edition of ECMAScript but some of it was
incorporated into the development of the sixth edition.
<p>The fifth edition of ECMAScript (published as ECMA-262 5th edition) codified de
facto interpretations of the language specification that have become common among
browser implementations and added support for new features that had emerged since the
publication of the third edition. Such features include accessor properties,
reflective creation and inspection of objects, program control of property
attributes, additional array manipulation functions, support for the JSON
object encoding format, and a strict mode that provides enhanced error checking
and program security. The fifth edition was adopted by the Ecma General Assembly of December 2009.
<p>The fifth edition was submitted to ISO/IEC JTC 1 for adoption under the fast-track
procedure, and approved as international standard ISO/IEC 16262:2011. Edition 5.1
of the ECMAScript Standard incorporated minor corrections and is the same text as
ISO/IEC 16262:2011. The 5.1 Edition was adopted by the Ecma General Assembly of June 2011.
<p>Focused development of the sixth edition started in 2009, as the fifth edition
was being prepared for publication. However, this was preceded by significant
experimentation and language enhancement design efforts dating to the publication
of the third edition in 1999. In a very real sense, the completion of the sixth
edition is the culmination of a fifteen year effort. The goals for this edition
included providing better support for large applications, library creation,
and for use of ECMAScript as a compilation target for other languages. Some
of its major enhancements included modules, class declarations, lexical
block scoping, iterators and generators, promises for asynchronous programming,
destructuring patterns, and proper tail calls. The ECMAScript library of
built-ins was expanded to support additional data abstractions including maps,
sets, and arrays of binary numeric values as well as additional support
for Unicode supplementary characters in strings and regular expressions.
The built-ins were also made extensible via subclassing. The sixth
edition provides the foundation for regular, incremental language and library
enhancements. The sixth edition was adopted by the General Assembly of June 2015.
`
const page = document.getElementById('page');
const paginator = document.getElementById('paginator');
page.innerHTML = text;
let pageheight = page.clientHeight;
let textheight = page.scrollHeight;
const nbutton = ((textheight / pageheight) |0) +1;
let y = 0;
const pagebeg = [];
for (let i = 0; i < nbutton; i++){
pagebeg.push(y);
y += pageheight;
const button = document.createElement('button');
button.dataset.npag = '' + i;
button.textContent = i+1;
paginator.append(button);
}
paginator.addEventListener('click', ({target}) => {
if (target.nodeName != 'BUTTON') return;
const nbutton = target.dataset.npag;
const beg = pagebeg[nbutton];
page.scrollTo(0, beg);
})
</script>
</body>
</html>
Надо еще делать пересчет при ресайзе. А как сделать, что бы при ресайзе остаться на том же (хотя бы приблизительно) месте, я без понятия.
