How to keep the highlighted section of a webpage always vertically in the center of the screen?

Question

I'm building a webservice that will allow the phrase-by-phrase navigation of the contents of a webpage. It's for a public with low-vision, not necessarily blind. The idea is that each phrase is read using text to speech as the user navigates up/down the page. To do this, I parse the webpage and generate span elements that represent the smallest chunks of text that are to be read.

To avoid screen jumping I'd like to keep the currently focussed span/chunk neatly positioned in the center of the screen so that as I navigate forwards / backwards, the screen scrolls gracefully and the user can always keep his attention on the same area of the screen reducing eye-fatigue.

Any ideas on the kind of CSS and/or JS that could be useful in this case ?

I'll paste in some of the example html as soon as I find a power outlet (Dead Battery syndrome)

Thanks /Colm

Here's an example of a long list of para elements containing the span's that identify phrases, imagine a long, long webpage that has this kind of structure, ie a full book

    <p class="nope">
    <span id="4">Depuis le début du vingtième siècle, les puissances européennes sont en rivalités permanentes : elles se disputent des territoires en Europe et provoquent des querelles nationalistes.</span>
</p>
<p class="nope">
    <span id="5">Par exemple : La france réclame l'Alsace-Lorraine à l'Allemagne.</span>
    <span id="6"> Dans les Balkans, les minorités nationalistes comme les Solvènes, les Croates ou les Bosniaques réclament des territoires.</span></p>
<p class="nope">
    <span id="7">Les pays européens forment des alliances pour défendre leurs intérêts.</span>
</p>
<p class="nope">
    <span id="8">Depuis le début du vingtième siècle, les puissances européennes sont en rivalités permanentes : elles se disputent des territoires en Europe et provoquent des querelles nationalistes.</span>
</p>
<p class="nope">
    <span id="9">Par exemple : La france réclame l'Alsace-Lorraine à l'Allemagne.</span>
    <span id="10"> Dans les Balkans, les minorités nationalistes comme les Solvènes, les Croates ou les Bosniaques réclament des territoires.</span></p>
<p class="nope">
    <span id="11">Les pays européens forment des alliances pour défendre leurs intérêts.</span>
</p>
<p class="nope">
    <span id="12">La Triple Entente est la Grande bretagne, la France et l'Empire Russe.</span>
</p>
<p class="nope">
    <span id="13">La Triple Alliance est l'Allemagne, l'empire Austro-Hongrois et l'Italie.</span></p>
<p class="nope">
    <span id="14">Chaque puissance se lance dans une cours aux armes, les dépenses militaires augmentent fortement.</span>
    <span id="15"> Exemple : l'Allemagne multiplie par 3 des dépenses militaires.</span>
</p>
    <span id="16">La Triple Entente est la Grande bretagne, la France et l'Empire Russe.</span>
</p>
<p class="nope">
    <span id="17">La Triple Alliance est l'Allemagne, l'empire Austro-Hongrois et l'Italie.</span></p>
<p class="nope">
    <span id="18">Chaque puissance se lance dans une cours aux armes, les dépenses militaires augmentent fortement.</span>
    <span id="19"> Exemple : l'Allemagne multiplie par 3 des dépenses militaires.</span>
</p>

Answer 1

As it stands, the possible implementations are quite broad, but if you can content yourself with an experimental technology , element.scrollIntoView() will do what you want:

document.getElementById("id-of-span-X")
  .scrollIntoView({inline: "center", block: "center", behaviour: "smooth"});