Question

我有一个生成随机数的脚本。我希望添加生成的新号码，滚动条应保留在底部，以便密切关注新生成的号码。每次。但滚动条保持在我移动它的位置（可以在中间或顶部）和新的否。继续生成，滚动条保持在原位。

function fetchChat() { // 30% of chance of having new message
  if (Math.random() <= 0.3) {
    $("#messages").append("<div>" + "Random message " + Math.random() + "</div>");

    // Scroll to bottom if you are at bottom, with tolerance of 50px       if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
    scrollToBottom();
  }
}


function sendMessage(txt) {
  $("#messages").append("<div>" + txt + "</div>");
  scrollToBottom();
}

function scrollToBottom() {
  $(window).scrollTop(1e10); // Lazy hack
}

setInterval(function() {
  fetchChat();
}, 500);

$("#input").keydown(function(e) {
  if (e.keyCode == 13) {
    sendMessage($("#input").val());
    $("#input").val("");
  }
});

<title>Live Table Data Edit</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<body>
  <div class="container">
    <br />
    <br />
    <br />
    <div class="table-responsive">
      <h3 align="center">You Are : Unknown</h3><br />
      <div id="live_data"></div>
    </div>
    <div id="messages" style="    border: 1px solid #ccc;
        width: 250px;
        height: 210px;
        padding: 10px;
        overflow-y:scroll;
    	"></div>
    <input id="input" type="text" />

Answer 1

您已连续几天询问此问题，请检查这是否符合您的要求。

function fetchChat() { // 30% of chance of having new message
    if (Math.random() <= 0.3) {
        $("#messages").append("<div>" + "Random message " + Math.random() + "</div>");
        scrollToBottom(); // Always scroll to bottom when new number arrived
    }
}

function sendMessage(txt) {
    $("#messages").append("<div>" + txt + "</div>");
    scrollToBottom();
}

function scrollToBottom() {
    $("#messages").scrollTop(1e10); // Lazy hack
}

setInterval(function() {
    fetchChat();
}, 500);

$("#input").keydown(function(e) {
    if (e.keyCode == 13) {
        sendMessage($("#input").val());
        $("#input").val("");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <br/><br/><br/>
    <div class="table-responsive">
        <h3 align="center">You Are: Unknown</h3><br/>
        <div id="live_data"></div>
    </div>  
    <div id="messages" style="border: 1px solid #ccc; width: 250px; height: 210px; padding: 10px; overflow-y: scroll;"></div>
    <input id="input" type="text"/> 
</div>

Answer 2

写$("#messages")而不是$(window)

因为您将append text in #message div写入window

＆＃13;

function fetchChat() { // 30% of chance of having new message
  if (Math.random() <= 0.3) {
    $("#messages").append("<div>" + "Random message " + Math.random() + "</div>");

    // Scroll to bottom if you are at bottom, with tolerance of 50px       if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
    scrollToBottom();
  }
}


function sendMessage(txt) {
  $("#messages").append("<div>" + txt + "</div>");
  scrollToBottom();
}

function scrollToBottom() {
  $("#messages").scrollTop(1e10); // Lazy hack
}

setInterval(function() {
  fetchChat();
}, 500);

$("#input").keydown(function(e) {
  if (e.keyCode == 13) {
    sendMessage($("#input").val());
    $("#input").val("");
  }
});

＆＃13;

<title>Live Table Data Edit</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<body>
  <div class="container">
    <br />
    <br />
    <br />
    <div class="table-responsive">
      <h3 align="center">You Are : Unknown</h3><br />
      <div id="live_data"></div>
    </div>
    <div id="messages" style="    border: 1px solid #ccc;
        width: 250px;
        height: 210px;
        padding: 10px;
        overflow-y:scroll;
    	"></div>
    <input id="input" type="text" />

＆＃13;

滚动条的脚本错误

2 个答案: