0

Есть таблица в которую с файла загружаются сообщения пользователей. Как сделать так чтобы когда таблица была заполнена, старые сообщения "уплывали" вверх, а новые были всегда внизу?

callback([
  {
    "time": "13:16:17",
    "user": "qwe",
    "message": "ok"
  },
  {
    "time": "13:17:43",
    "user": "qwe",
    "message": "asd"
  },
  {
    "time": "13:17:48",
    "user": "qwe",
    "message": "zxc"
  },
  {
    "time": "13:17:51",
    "user": "qwe",
    "message": "dsa"
  },
  {
    "time": "13:17:54",
    "user": "qwe",
    "message": "czx"
  }
]);

function callback(respond) {
  for (var i = 0; i < respond.length; i++) {
    var data = respond[i];
    var rowClone = $('.mess_hide').clone().removeClass('mess_hide');
    $('#messages').append(rowClone);
    $('.time', rowClone).html(data.time);
    $('.name', rowClone).html(data.user);
    $('.message', rowClone).html(data.message);
  }
}
.scroller {
  width: 490px;
  height: 255px;
  max-height: 255px;
  overflow-y: auto;
  overflow-x: hidden;
}

table#messages {
  min-height: 260px;
  width: 100%;
  background: grey;
  border: none;
}

table#messages::-webkit-scrollbar {
  width: 1em;
}

table#messages::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

table#messages::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

tr {
  height: 20%;
}

td.time,
td.name {
  width: 70px;
  max-width: 75px;
  text-align: center;
}

td.name {
  font-weight: bold;
}

form#text_submit {
  display: inline-flex;
  align-items: flex-start;
}

input#text {
  width: 370px;
  height: 30px;
  margin-top: 20px;
  background: grey;
  font-family: 'Montserrat';
  font-size: 16px;
  border: none;
  align-self: flex-start;
}

input#submit {
  padding: 0;
  margin-left: 21px;
  margin-top: 21px;
  height: 30px;
  width: 95px;
  background: #635960;
  border: none;
  color: white;
  font-family: 'Montserrat';
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
  <div class="scroller">
    <table id="messages">
      <tr class="mess_hide">
        <td class="time"></td>
        <td class="name"></td>
        <td class="message"></td>
      </tr>
    </table>
  </div>
  <form method="POST" id="easyForm">
    <input type="text" name="text" id="text">
    <input type="submit" value="Send" id="submit">
  </form>
</div>

Как видно, если запустить код, то из за большого кол-ва сообщений таблица не может их всех вместить и поэтому новые сообщения, для которых нет места просто записываются вниз и их не видно. Подскажите, как сделать что бы новые сообщения всегда были видны внизу, а более старые прятались сверху?

9
  • может попробовать вместо append использовать prepend?
    – Buka
    4 июл 2017 в 11:35
  • @Buka к сожалению нет, так сообщения будут видны, но прижаты к верху.
    – Tick-Tack
    4 июл 2017 в 11:42
  • @МаксимБуяков поравил ответ - теперь блок будет скроллиться вниз при любом кол-ве сообщений
    – Cheg
    4 июл 2017 в 11:45
  • @Cheg спасибо большое, всё работает, но скажите, а если сообщения будут добавляться(прямо от ввода а не с файла), как сделать так чтобы новые тоже были видны внизу, а не "прятались"?
    – Tick-Tack
    4 июл 2017 в 11:48
  • @МаксимБуяков по тому же принципу - при добавлении сообщения из поля ввода прописывайте $('.scroller').scrollTop($('#messages').height());
    – Cheg
    4 июл 2017 в 11:51

2 ответа 2

2

Нужно добавить .scrollTop() для .scroller

callback([{
    "time": "13:00:24",
    "user": "qwe",
    "message": "qweqq"
  },
  {
    "time": "13:00:08",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "13:00:09",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:00",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:05",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:09",
    "user": "qwe",
    "message": "qqqqq"
  }, {
    "time": "13:16:08",
    "user": "qwe",
    "message": "Hello"
  },
  {
    "time": "13:16:14",
    "user": "qwe",
    "message": "Hi"
  },
  {
    "time": "13:16:17",
    "user": "qwe",
    "message": "ok"
  },
  {
    "time": "13:16:19",
    "user": "qwe",
    "message": "okwe"
  },
  {
    "time": "13:17:43",
    "user": "qwe",
    "message": "asd"
  },
  {
    "time": "13:17:48",
    "user": "qwe",
    "message": "zxc"
  },
  {
    "time": "13:17:51",
    "user": "qwe",
    "message": "dsa"
  },
  {
    "time": "13:00:08",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "13:00:09",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:00",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:05",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:09",
    "user": "qwe",
    "message": "qqqqq"
  }, {
    "time": "13:16:08",
    "user": "qwe",
    "message": "Hello"
  },
  {
    "time": "13:16:14",
    "user": "qwe",
    "message": "Hi"
  },
  {
    "time": "13:16:17",
    "user": "qwe",
    "message": "ok"
  },
  {
    "time": "13:16:19",
    "user": "qwe",
    "message": "okwe"
  },
  {
    "time": "13:17:43",
    "user": "qwe",
    "message": "asd"
  },
  {
    "time": "13:17:48",
    "user": "qwe",
    "message": "zxc"
  },
  {
    "time": "13:17:51",
    "user": "qwe",
    "message": "dsa"
  },
  {
    "time": "13:00:08",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "13:00:09",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:00",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:05",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:09",
    "user": "qwe",
    "message": "qqqqq"
  }, {
    "time": "13:16:08",
    "user": "qwe",
    "message": "Hello"
  },
  {
    "time": "13:16:14",
    "user": "qwe",
    "message": "Hi"
  },
  {
    "time": "13:16:17",
    "user": "qwe",
    "message": "ok"
  },
  {
    "time": "13:16:19",
    "user": "qwe",
    "message": "okwe"
  },
  {
    "time": "13:17:43",
    "user": "qwe",
    "message": "asd"
  },
  {
    "time": "13:17:48",
    "user": "qwe",
    "message": "zxc"
  },
  {
    "time": "13:17:51",
    "user": "qwe",
    "message": "dsa"
  },
  {
    "time": "13:00:08",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "13:00:09",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:00",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:05",
    "user": "qwe",
    "message": "qqqqq"
  },
  {
    "time": "14:00:09",
    "user": "qwe",
    "message": "qqqqq"
  }, {
    "time": "13:16:08",
    "user": "qwe",
    "message": "Hello"
  },
  {
    "time": "13:16:14",
    "user": "qwe",
    "message": "Hi"
  },
  {
    "time": "13:16:17",
    "user": "qwe",
    "message": "ok"
  },
  {
    "time": "13:16:19",
    "user": "qwe",
    "message": "okwe"
  },
  {
    "time": "13:17:43",
    "user": "qwe",
    "message": "asd"
  },
  {
    "time": "13:17:48",
    "user": "qwe",
    "message": "zxc"
  },
  {
    "time": "13:17:51",
    "user": "qwe",
    "message": "dsa"
  },
  {
    "time": "13:17:54",
    "user": "qwe",
    "message": "czx"
  }
]);

function callback(respond) {
  for (var i = 0; i < respond.length; i++) {
    var data = respond[i];
    var rowClone = $('.mess_hide').clone().removeClass('mess_hide');
    $('#messages').append(rowClone);
    $('.time', rowClone).html(data.time);
    $('.name', rowClone).html(data.user);
    $('.message', rowClone).html(data.message);
    $('.scroller').scrollTop($('#messages').height());
  }
}
.scroller {
  width: 490px;
  height: 255px;
  max-height: 255px;
  overflow-y: auto;
  overflow-x: hidden;
}

table#messages {
  min-height: 260px;
  width: 100%;
  background: grey;
  border: none;
}

table#messages::-webkit-scrollbar {
  width: 1em;
}

table#messages::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

table#messages::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

tr {
  height: 20%;
}

td.time,
td.name {
  width: 70px;
  max-width: 75px;
  text-align: center;
}

td.name {
  font-weight: bold;
}

form#text_submit {
  display: inline-flex;
  align-items: flex-start;
}

input#text {
  width: 370px;
  height: 30px;
  margin-top: 20px;
  background: grey;
  font-family: 'Montserrat';
  font-size: 16px;
  border: none;
  align-self: flex-start;
}

input#submit {
  padding: 0;
  margin-left: 21px;
  margin-top: 21px;
  height: 30px;
  width: 95px;
  background: #635960;
  border: none;
  color: white;
  font-family: 'Montserrat';
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
  <div class="scroller">
    <table id="messages">
      <tr class="mess_hide">
        <td class="time"></td>
        <td class="name"></td>
        <td class="message"></td>
      </tr>
    </table>
  </div>
  <form method="POST" id="easyForm">
    <input type="text" name="text" id="text">
    <input type="submit" value="Send" id="submit">
  </form>
</div>

В идеале, конечно, можно высчитать точную позицию для прокрутки, но и в этом случае, блок будет всегда проскроллен в самый низ.

0

Добавьте скролл в низ страницы в каждом вызове вашего callback

$('#messages').scrollTop($(messages).height());

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.