2015-11-19 127 views
-2

我正在开发一个消息系统。我需要将滚动条固定下来,因为当新数据到达时它应该自动关闭。如何在HTML/CSS中执行此操作 如果这个完整的代码是不专业的方式..如何修复底部的滚动条?

enter image description here

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"; 
    } 
} 

?>

+1

你能提供一些代码来显示你已经尝试过吗? – rblarsen

+0

@rblarsen在那里它是 –

+0

我认为这个解决方案不是基于CSS,而是基于JS,所以你可以提供标记和一些你的JS脚本吗? – Aroniaina

回答

1

,如果你使用jQuery你没有提到。如果是的话,你可以这样做:

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

或者,仅使用Javascript,你可以在这里找到解决方案: Scroll to bottom of div?

你总是需要通过div的高度到滚动选项,所以它坚持到底部。这意味着你需要将它绑定到检测新消息何时被接收和呈现的事件。

0

您的解决方案SI基于scrollHeight,代码的这两个灵能帮助你

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

你可以看到这个片段,例如,只需点击蓝色的div将邮件添加

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++; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toScrollBottom" style="height: 150px; overflow-y: scroll; margin: 50px; border: solid 2px blue;"> 
 
    <div id="messages"> 
 
    <p>Message Line FIRST<br/>Message Line</p> 
 
    </div> 
 
</div>

+0

但我已经添加了overflow-y:scroll;但它不工作,并且我粘贴了我的CSS代码。 –

+0

粘贴您的HTML标记 – Aroniaina

+0

如果可能,粘贴脚本添加消息 – Aroniaina