ウェブページのハイライト表示されたセクションを常に画面の中央に垂直に保つにはどうすればいいですか？

Question

私はウェブページのコンテンツのフレーズバイフレーズナビゲーションを可能にするウェブサービスを構築しています。それは低視力の、一般に盲目ではない一般のためのものです。ユーザーがページを上/下にナビゲートするときに、各フレーズがテキストからスピーチを使用して読み込まれるという考えがあります。これを行うために、私はWebページを解析し、読み取られるテキストの最小の塊を表すspan要素を生成します。

画面のジャンプを避けるために、現在フォーカスされているスパン/チャンクを画面中央にきちんと配置して、前後にナビゲートすると画面がスムーズにスクロールし、ユーザーは常に注意を払うことができます画面の同じ領域が目の疲れを軽減します。

この場合に役立つCSSやJSの種類に関するアイデアはありますか？

私はできるだけ早く私はここでは電源コンセント（デッドバッテリー症候群）

感謝/コルム

を含むパラ要素の長いリストの例です見つけると例のHTMLの一部にペーストしますスパンのフレーズを特定することは、現状では、可能な実装は非常に広範であるが、あなたはan experimental technologyを自分でコンテンツことができれば、フルブック

<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

すなわち、このような構造を持って長い、長いWebページを想像しますあなたが欲しいものを行います：