を送信した後でメッセージボックスの内容がスクロールアップされて読み込まれています.iスクロールダウンします。

Question

送信後、メッセージボックスの内容をスクロールしてリロードしています。私はFacebookのメッセンジャーのようなイメージのようにスクロールダウンしたい。私は多くの方法を試していますが、適切な出力を得ていません。

チャット形式

<?php foreach ($b_to_c as $row) { ?> 

    <?php 
    if ($row->From == 'customer') { 
     ?> 
     <div class="left"> 
      <div class="row"> 
       <div class="col-md-1"> 


        <?php if (empty($roww->customer_image[0]) || empty($roww->supplier_image)) { ?> 
         <img src="<?php echo base_url(); ?>images/default.jpg" class="img-circle" width="30px" height="30px"/> 

        <?php } else { ?> 
         <img src="<?php echo 'data:image;base64,' . $roww->supplier_image; ?>" class="img-circle" width="30px" height="30px"/> 

        <?php } ?> 

                           <!--<img src="<?php // echo 'data:image;base64,' .$roww->supplier_image;     ?>" class="img-circle" width="30px" height="30px"/>--> 
       </div> 
       <div class="col-md-11"> 

        <div class="left_msg_block"> 

         <?php $timestamp1 = strtotime($row->msg_sent_time); ?> 
         <?php $mesgtimming = date(' D-h:i A', $timestamp1); ?> 
         <div class="left_messagetext"><a href="#" data-toggle="tooltip" title="<?php echo $mesgtimming; ?>"><?php echo $row->message; ?></a></div> 

        </div> 
       </div> 
      </div> 
     </div> 
    <?php } else { ?>     
     <div class="right"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="right_msg_block"> 
         <?php $timestamp1 = strtotime($row->msg_sent_time); ?> 
         <?php $mesgtimming = date(' D-h:i A', $timestamp1); ?> 
         <div class="right_messagetext"><a href="#" data-toggle="tooltip" title="<?php echo $mesgtimming; ?>"><?php echo $row->message; ?></a></div> 

        </div> 
       </div>          
      </div> 
     </div> 
     <?php 
    } 
} 
?> 

CSSコード

.left_messagetext a{ 
     color: rgba(0, 0, 0, 1); 
    } 
    .right_messagetext{ 
     background-color: #0084ff; 
     margin: 1px 0; 
     padding: 6px 12px; 
     word-wrap: break-word; 
     clear: right; 
     float: right; 
     border-bottom-left-radius: 1.3em; 
     border-top-left-radius: 1.3em; 
     max-width: 60%; 
    } 
    .right_messagetext a{ 
     color:#fff; 
    } 
    .scrollstarts{ 
     overflow-y:scroll; 
     max-height: 500px; 
     overflow-x:hidden; 
     padding:3%; 
    } 
.left_messagetext{ 
    background-color: #d0cbcb; 
    margin: 1px 0; 
    padding: 6px 12px; 
    border-bottom-right-radius: 1.3em; 
    border-top-right-radius: 1.3em; 
    clear: left; 
    float: left; 
    word-wrap: break-word; 
    max-width: 60%; 
} 

コントローラコード

$data['b_to_c'] = $this->Profile_model->Buyer_s($pid); 
     $this->load->view('buyermessageview', $data) 

モデルコード

public function Buyer_s($pid) { 

     $this->db->select('*'); 
     $this->db->from('communication'); 
     $this->db->join('supplier_otherdetails', 'supplier_otherdetails.supplierid_fk = communication.supplier_id'); 
     $this->db->join('customer_registration', 'communication.Customer_id=customer_registration.id'); 
     $array = array('communication.product_id' => $pid, 'communication.Customer_id' => $this->session->id); 
//  $where = "communication.From='customer' and 'communication.Customer_id',$this->session->id"; 
     $this->db->where($array); 
     $this->db->order_by("msg_sent_time", "asc"); 
     $query = $this->db->get(); 
     $results = []; 
     if ($query->num_rows() > 0) { 

      $results = $query->result(); 
     } 
     return $results; 
    } 

Answer 1

あなたは多分ページの一番下までスクロールするためにはJavaScriptを使用してもらえますか？

例：

<script> 
    // scroll to the bottom of the page 
    window.scrollTo(0,document.body.scrollHeight); 
</script> 

それとも、それはあなたがダウンして行きたいメッセージボックスにだけだ場合、あなたが使用できます。

<script> 
    // scroll to the bottom of messagediv 
    var messageDiv = document.getElementById("your_div"); 
    messageDiv.scrollTop = messageDiv.scrollHeight; 
</script> 

あなたはもちろん機能でスクリプトをラップすることができsetTimeout()またはページの読み込み時にいつでも呼び出すことができます。