Question

我正在建立一个网络服务，允许逐页导航网页内容。这是一个低视力的公众，不一定是盲人。这个想法是当用户在页面上/下导航时，使用文本到语音来读取每个短语。为此，我解析网页并生成代表要读取的最小文本块的span元素。

为了避免屏幕跳跃，我想将当前聚焦的跨度/块整齐地放置在屏幕的中央，这样当我向前/向后导航时，屏幕会优雅地滚动，用户可以始终将注意力集中在屏幕的相同区域减少了眼睛疲劳。

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

一旦找到电源插座（死电池综合症），我就会粘贴一些示例html

谢谢/ Colm

这是一个很长的para元素列表的例子，其中包含识别短语的span，想象一个具有这种结构的长而长的网页，即一本完整的书

    <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"});

如何将网页的突出显示部分始终垂直放在屏幕中央？

1 个答案: