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

あなたはこのようなものが欲しいです、ここでボックスはあなたのチャットを含む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

常にページ全体の下部にある垂直スクロールバーをスクロールするコード行の下。

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

「 daViewerContainer 」という名前のスクロール可能なdivコンテナの下部にある垂直スクロールバーを常にスクロールするコード行の下。

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

私はこれを次のように修正しました：

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

すべては、divをどのように構成するかによって異なり、ドキュメントにdivを使用します。しかし、これは粘着性のあるフッターでも優れた働きをします。

于 2014-09-01T22:19:05.887 に答える