0

我正在使用 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() 添加输出以某种方式干扰底层维度检测机制？append() 甚至是去那里的正确方法吗？

或者也许我根本不应该使用文本区域，而应该使用带有滚动条的 DIV？诚然，我在 HTML + CSS 方面落后于时代，并且不知道如何最好地实现这一点，并且仍然获得我所追求的等宽格式的包装输出。

非常感谢您的任何建议！

4

2 回答 2

7

解决了：

http://jsfiddle.net/Ua9qc/

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

$('#log_viewer').scrollTop(h1 - h2);`
于 2013-09-16T17:43:23.760 回答
0

我不确定这会对您有所帮助。如果你想滚动底部的某个元素，你可以使用这个函数通过传递 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 [];
}
于 2013-09-16T17:43:40.983 回答