Question

我正在使用jQuery将文本追加到textarea

var box = $('<textarea></textarea>')
    .attr({id: 'log_viewer',
           readonly: '',
       cols: 100,
       rows: 40})
    .appendTo($(outputEntity));

当从WebSocket收到数据时，它会附加到textarea的内容中：

 ws.onmessage = function(msg) { 
     var data = decodeURIComponent(msg.data);

     data = data.replace('<', '&lt;');
     data = data.replace('>', '&gt;');

     box.append(data);
 }

我需要的是此框自动滚动到底部，以便视口始终以输出的最后一页为中心。在关于此主题的其他一些Stack Overflow建议之后，我尝试了：

 $('#log_viewer').scrollTop = $('#log_viewer')[0].scrollHeight - $('#log_viewer').height();

然而，这不起作用 - 至少，不是Linux上的Chrome或Firefox，这是我可以访问的。该框不会滚动。

如何让这个框自动滚动到JS最底层的页面？使用append（）添加输出以某种方式干扰底层维度检测机制？追加（）甚至是去那里的正确方法吗？

或许我应该根本不使用textarea，而是使用带滚动条的DIV？不可否认，我相当落后于HTML + CSS，并且不知道如何最好地实现这一点，并且仍然得到我所追求的等宽度格式化的包装输出。

非常感谢任何建议！

Answer 1

解决：

http://jsfiddle.net/Ua9qc/

var h1 = $('#log_viewer')[0].scrollHeight,
h2 = $('#log_viewer').height();

$('#log_viewer').scrollTop(h1 - h2);`

Answer 2

我不确定这会对你有所帮助。如果你想在底部滚动某个元素，你可以使用这个函数通过传递div id来滚动。将这些功能添加到脚本

function scrollme(id)
{
     var scrollElem = scrollableElement('html', 'body');
     var targetOffset = $(id).offset().top;
      $(scrollElem).animate({scrollTop: targetOffset-100}, 1000, function() {

          });
}
function scrollableElement(els)
{
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
}

使用JavaScript滚动textarea

2 个答案: