17

我正在做一个简单的聊天应用程序，我想将 div 的滚动条始终固定在底部。就像这样在此处输入图像描述

加载索引页时，滚动条必须在底部

这是我的 style.css

body{
font: 0.9em monospace;
}
   .messages{
    border: 1px solid #ccc;
    width: 250px;
    height: 210px;
    padding: 10px;
    overflow-y:scroll;

}
.message{
    color: slategrey;

}
 .message p{
    margin: 5px 0;
}
.entry{
   width: 260px;
   height: 40px;
   padding: 5px;
   margin-top: 5px;
   font: 1em fantasy;

}

这是我的 index.php

<?php
session_start();
$_SESSION['user'] = (isset($_GET['user']) === TRUE) ? (int) $_GET['user'] : 0;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <link rel="stylesheet" href="css/styles.css"></link>
  </head>
   <body>
      <div class="chat">
           <div class="messages" id="messages">
           </div>
        <textarea class="entry" placeholder="type here and press enter"></textarea>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/chat.js"> </script>
</body>

我该如何设置，请帮助我..谢谢

4

6 回答 6

26

试试这个jquery：

$(".messages").animate({ scrollTop: $(document).height() }, "slow");
  return false;

这是小提琴：http: //jsfiddle.net/EX6vs/

或者是指元素的高度（很多人认为是正确的做法），如下：

$(".messages").animate({ scrollTop: $(this).height() }, "slow");
  return false;

这是小提琴：http: //jsfiddle.net/69vpnyu1/

于 2013-03-26T05:04:52.387 回答
7

你想要这样的东西，其中 box 是包含你的聊天的 div。在页面加载时调用这些。

var box = document.getElementById('Box');
box.scrollTop = box.scrollHeight;

当您发布新聊天时也调用它。

我使用谷歌应用引擎创建了一个类似的应用程序。你可以看看这里

http://chatter-now.appspot.com/

随意使用它作为参考。尽管您使用的是 php，但视觉方面可能会有所帮助。

于 2013-03-26T04:57:30.683 回答
2

您可以使用jQuery此处的演示来执行此操作：

http://jsfiddle.net/9S92E/

于 2013-03-26T04:57:20.350 回答
2 
function loadchatval(){
    $.post('loadchat.php',function(data){               
    $('#load_chat').html(data); 
    $("#load_chat").animate({ scrollTop: $(document).height() }, "slow");
    return false;
});
}
于 2015-06-28T17:48:52.527 回答
0

我用以下方法解决了这个问题：

$(document).scrollTop($(document).height());

一切都取决于您如何配置 div，然后将 div 用于文档。但这也适用于粘性页脚。

于 2014-09-01T22:19:05.887 回答
0

下面的代码行滚动垂直滚动条总是在整个页面的底部。

$("html, body").animate({ scrollTop: $(document).height() }, "fast");

下面的代码行总是在名为“ daViewerContainer ”的可滚动 div 容器的底部滚动垂直滚动条。

$("#daViewerContainer").animate({ scrollTop: $(document).height() }, "fast");
于 2013-07-22T16:41:28.493 回答