Question

我有行文字，用户可以按下下一个箭头（在键盘上）来更改/移动活动词，这样用户就可以专注于'红色字'。

问题是，元素的高度有限制（在这种情况下是200px），我想让用户专注于元素中间的活动单词（当活动单词到达元素的中间时）。 / p>

请帮帮我..谢谢

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而不是offset，并添加现有的scrollTop属性（因为它会影响position）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript焦点元素在类激活

1 个答案: