Javascript焦點元素在類激活

Question

我有行文本，用戶可以按下下一個箭頭（在鍵盤上）來更改/移動活動單詞，這樣用戶就可以專注於'紅色字'。

問題是，元素的高度有限制（在這種情況下是200px），我想讓用戶專注於元素中間的活動單詞（當活動單詞到達元素的中間時）。

請幫幫我..謝謝

 document.onkeydown = pressKey; function pressKey(e) { e = e || window.event; if (e.keyCode == '39') { var word = $('pre span.active'); if($(word).next('span').length){ $(word).next().addClass('active'); $(word).removeClass('active'); } // THIS is the line of the problem $('pre').animate({ scrollTop: $('span.active').offset().top - ( $(window).height() - $('span.active').outerHeight(true) ) / 2 }, 10); } if (e.keyCode == '37') { var word = $('pre span.active'); if($(word).prev('span').length){ $(word).prev().addClass('active'); $(word).removeClass('active'); } // THIS is the line of the problem $('pre').animate({ scrollTop: $('span.active').offset().top - ( $(window).height() - $('span.active').outerHeight(true) ) / 2 }, 10); } } 

 pre {max-height:200px;} span.active {color:red} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre id="text"> <span class="active">click this element then push arrow next (keyboard)</span> <span>All</span> <span>I</span> <span>want</span> <span>is</span> <span>when</span> <span>user</span> <span>push</span> <span>next</span> <span>arrow</span> <span>until</span> <span>the</span> <span>active</span> <span>class</span> <span>reach</span> <span>the</span> <span>middle</span> <span>of</span> <span>this</span> <span>element</span> <span>then</span> <span>automatically</span> <span>move</span> <span>the</span> <span>scroll</span> <span>to</span> <span>keep</span> <span>the</span> <span>active</span> <span>class</span> <span>on</span> <span>the</span> <span>middle</span> <span>of</span> <span>element</span> <span>so</span> <span>the</span> <span>user</span> <span>have</span> <span>focus</span> <span>on</span> <span>the</span> <span>middle</span> <span>of</span> <span>this</span> <span>element</span> <span>also</span> <span>when</span> <span>the</span> <span>user</span> <span>push</span> <span>prev</span> <span>arrow</span> <span>minim</span> <span>veniam</span> <span>quis</span> <span>nostrud</span> <span>excertitation</span> <span>ullaco</span> <span>laboris</span> <span>lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span> <span>consectetur</span> <span>adispicing</span> <span>elit</span> <span>sed</span> <span>do</span> <span>eiusmod</span> <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span> <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span> <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span> <span>veniam</span> <span>quis</span> <span>nostrud</span> <span>excertitation</span> <span>ullaco</span> <span>laboris</span> <span>lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span> <span>consectetur</span> <span>adispicing</span> <span>elit</span> <span>sed</span> <span>do</span> <span>eiusmod</span> <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span> <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span> <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span> <span>veniam</span> <span>quis</span> <span>nostrud</span> <span>excertitation</span> <span>ullaco</span> <span>laboris</span> </pre> 

Answer 1

您應該使用position not offset ，並添加現有的scrollTop屬性（因為它會影響position ）：

 document.onkeydown = pressKey; var pre = $('pre'); function pressKey(e) { e = e || window.event; if (e.keyCode == '39') { var word = $('pre span.active'); if($(word).next('span').length){ $(word).next().addClass('active'); $(word).removeClass('active'); } var scrollTop = pre[0].scrollTop + $('span.active').position().top - pre.height() / 2; pre.animate({ scrollTop: scrollTop }, 10); } if (e.keyCode == '37') { var word = $('pre span.active'); if($(word).prev('span').length){ $(word).prev().addClass('active'); $(word).removeClass('active'); } var scrollTop = pre[0].scrollTop + $('span.active').position().top - pre.height() / 2; pre.animate({ scrollTop: scrollTop }, 10); } } 

 pre {max-height:200px} span.active {color:red} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre id="text"> <span class="active">click this element then push arrow next (keyboard)</span> <span>All</span> <span>I</span> <span>want</span> <span>is</span> <span>when</span> <span>user</span> <span>push</span> <span>next</span> <span>arrow</span> <span>until</span> <span>the</span> <span>active</span> <span>class</span> <span>reach</span> <span>the</span> <span>middle</span> <span>of</span> <span>this</span> <span>element</span> <span>then</span> <span>automatically</span> <span>move</span> <span>the</span> <span>scroll</span> <span>to</span> <span>keep</span> <span>the</span> <span>active</span> <span>class</span> <span>on</span> <span>the</span> <span>middle</span> <span>of</span> <span>element</span> <span>so</span> <span>the</span> <span>user</span> <span>have</span> <span>focus</span> <span>on</span> <span>the</span> <span>middle</span> <span>of</span> <span>this</span> <span>element</span> <span>also</span> <span>when</span> <span>the</span> <span>user</span> <span>push</span> <span>prev</span> <span>arrow</span> <span>minim</span> <span>veniam</span> <span>quis</span> <span>nostrud</span> <span>excertitation</span> <span>ullaco</span> <span>laboris</span> <span>lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span> <span>consectetur</span> <span>adispicing</span> <span>elit</span> <span>sed</span> <span>do</span> <span>eiusmod</span> <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span> <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span> <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span> <span>veniam</span> <span>quis</span> <span>nostrud</span> <span>excertitation</span> <span>ullaco</span> <span>laboris</span> <span>lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span> <span>consectetur</span> <span>adispicing</span> <span>elit</span> <span>sed</span> <span>do</span> <span>eiusmod</span> <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span> <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span> <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span> <span>veniam</span> <span>quis</span> <span>nostrud</span> <span>excertitation</span> <span>ullaco</span> <span>laboris</span> </pre>