javascript - 如何使网页的突出显示部分始终垂直位于屏幕中央？

Question

我正在构建一个网络服务，允许对网页内容进行逐句导航。它适用于视力不佳的公众，不一定是盲人。这个想法是，当用户在页面上/下导航时，每个短语都使用文本到语音来读取。为此，我解析网页并生成代表要读取的最小文本 block 的跨度元素。

为了避免屏幕跳转，我希望将当前聚焦的 span/chunk 整齐地定位在屏幕中央，这样当我向前/向后导航时，屏幕会优雅地滚动，用户可以始终将注意力集中在减少眼睛疲劳的屏幕相同区域。

关于在这种情况下可能有用的 CSS 和/或 JS 类型的任何想法？

我会在找到电源 socket 后立即粘贴一些示例 html(电池没电综合症)

谢谢/Colm

下面是一长串 para 元素的示例，其中包含标识短语的跨度，想象一个具有这种结构的很长很长的网页，即一本完整的书

    <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

就目前而言，可能的实现非常广泛，但如果您能满足于 an experimental technology , element.scrollIntoView()会做你想做的事:

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