Question

.css文件

 #log{
    -webkit-box-flex: 1;
    padding-top: 20px;
    overflow: scroll   ;
    height: 150px;
    color: #23568a;
    font-size: large;
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;

    }

在html文件中，我正在使用这样的日志

 <div id="receiveBox">
        <h2>Receive </h2>
        <div id="log"></div>
    </div>

socket.on('my_response', function(msg) {
                $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
            });

使用
溢出：滚动我尝试将滚动条添加到将拆分的结果中，但滚动条仅出现在Safari和Chrome中，而不出现在Firebox中。我如何使其在Firefox中工作？

Answer 1

编辑（后退/反复评论）：

要使其在添加新数据时自动向下滚动div，请在socket.on之后立即将这段代码添加到您的js中：

socket.on('my_response', function(msg) {
  $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());

  //New
  $("#log").animate({scrollTop: $("#log").prop("scrollHeight")}, 'slow');
});

更新了jsfiddle，添加了硬编码的新数据（忽略.html()的内容，这只是示例）：

https://jsfiddle.net/82h4a5d9/24/

Kumuda，

我个人没有这段代码的经验：

socket.on('my_response', function(msg) {
    $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
});

但是，只看了HTML和CSS，并在Firefox中使用了一些虚拟数据进行了测试之后，看来这只是弹性方向引起的问题。尝试不这样做吗？

所以只需注释掉这部分：

/* flex-direction: column-reverse; */

https://jsfiddle.net/82h4a5d9/3/

CSS溢出不适用于Firefox

1 个答案: