2015-11-19 184 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