Question

我正在开发一个消息系统。我需要修改滚动条，因为当新数据到达时它会自动关闭。如何在HTML / CSS中执行此操作如果这个完整的代码是不专业的话，请不要挖掘..

Home.php

<?php
// Turn off all error reporting
error_reporting(0);
    //shop not login  users from entering 
    if(isset($_SESSION['id'])){
        $user_id = $_SESSION['id'];
    }else{

    }


require_once("./inc/connect.inc.php");
?>

<header>
    <link rel="stylesheet" href="home - Copy.css" />
        <nav>
            <h3><a class="h3" href="#">CP</a></h3>
            <div><a href="logout.php"><span>Logout</span></a></div>
                <div>        
                        <?php

   //Start your session
   session_start();
   //Read your session (if it is set)
   if (isset($_SESSION['user_login'])){

 echo '<div id="ull">'.strtoupper($_SESSION['user_login']).'</div>';
         }



       ?>

                    </div>






        </nav>
        <body>
        <div class="shead">
        <div class="a1">       <li   >Frequent Member</li>
        <div class="fm">
             <ul>
                <?php

                    //show all the users expect me
                $user_id = $_SESSION['id'];
                    $q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
                    //display all the results
                    while($row = mysql_fetch_assoc($q)){
                        echo "  <div class='usernames'>



                        <a id=\"usernames\" href='home.php?id={$row['id']}'>{$row['username']}</a>
                                </div> 
                        ";
                    }
                ?>
            </ul>
            </div>
        </div>




    <div class="a2">      <li >Site's Popular in Your College</li></div>

        </div>
</header>


<div class="rss">

  <?php

 // include('rssclass.php');
  //include('rss.php');

?> 
</div>

<div class="message-right">
            <!-- display message -->
            <div class="display-message">
            <?php
                //check $_GET['id'] is set
                if(isset($_GET['id'])){
                    $user_two = trim(mysql_real_escape_string( $_GET['id']));
                    //check $user_two is valid
                    $q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
                    //valid $user_two
                    if(mysql_num_rows($q) == 1){
                        //check $user_id and $user_two has conversation or not if no start one
                        $conver = mysql_query( "SELECT * FROM  conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");

                        //they have a conversation
                        if(mysql_num_rows($conver) == 1){
                            //fetch the converstaion id
                            $fetch = mysql_fetch_assoc($conver);
                            $conversation_id = $fetch['id'];
                        }else{ //they do not have a conversation
                            //start a new converstaion and fetch its id
                            $q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
                            $conversation_id = mysql_insert_id($con);
                        }
                    }else{
                        die("Invalid $_GET ID.");
                    }
                }else {
                    die("Click On the Person to start Chating.");
                }
            ?>


            </div>
            <script type="text/javascript">
            var objDiv = document.getElementById("display-message");
objDiv.scrollTop = objDiv.scrollHeight;
</script>

<div class="send-message">
                <!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
                <input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
                <input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
                <input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
                <div class="textbox">
                    <input class="t_box" type="text" id="message"  placeholder="Enter Your Message"/>
                    <button class="t_btn" id="reply">Reply</button> 

                <span id="error"></span>
                </div>

            </div>
            </div>

            <!--
<div class="textbox">
    <form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
    <input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
        </div>-->



<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script> 




</body>

Getmsg.php

 <?php
require_once("./inc/connect.inc.php");
if(isset($_GET['c_id'])){
    //get the conversation id and
    $conversation_id = base64_decode($_GET['c_id']);
    //fetch all the messages of $user_id(loggedin user) and $user_two from their conversation
    $q = mysql_query( "SELECT * FROM `messages` WHERE conversation_id='$conversation_id'");
    //check their are any messages
    if(mysql_num_rows($q) > 0){
        while ($m = mysql_fetch_assoc($q)) {
            //format the message and display it to the user
            $user_form = $m['user_from'];
            $user_to = $m['user_to'];
            $message = $m['message'];

            //get name and image of $user_form from `user` table
            $user = mysql_query( "SELECT username FROM `users` WHERE id='$user_form'");
            $user_fetch = mysql_fetch_assoc($user);
            $user_form_username = $user_fetch['username'];


            //display the message
            echo "
                        <div class='message'>

                            <div class='text-con'>
                                <a href='#''>{$user_form_username}:</a>
                               <p> {$message}<p>
                            </div>
                        </div>
                        <hr>";


        }
    }else{
        echo "No Messages";
    }
}

＆GT？;

Answer 1

您的解决方案si基于title，这两个代码可以帮助您

scrollHeight

例如，您可以看到此代码段，只需点击蓝色div即可添加消息

var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;

var count = 0;
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
$("body").on("click","#toScrollBottom",function(){
  $("#messages").append('<p>Message Line' + count + '<br/>Message line</p>');
  var objDiv = document.getElementById("toScrollBottom");
  objDiv.scrollTop = objDiv.scrollHeight;
  count++;
});

Answer 2

你没有提到你是否使用jQuery。如果是，您可以这样做：

$('#your_div_id').scrollTop($('#your_div_id')[0].scrollHeight);

或者，只有使用Javascript，您才能在此处找到解决方案： Scroll to bottom of div?

您始终需要将div的高度传递给滚动选项，以便将其粘贴到底部。这意味着您需要将此绑定到检测何时接收和呈现新消息的事件。

如何修复底部的滚动？

2 个答案: