Question

提交消息页面后重新加载消息框内容向上滚动。我想向下滚动，如facebook messenger图像所示。我正在尝试很多方法，但没有得到正确的输出。

聊天表单

<?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()或在页面加载时调用它等等...

提交消息页面后重新加载消息框内容向上滚动。我想向下滚动

1 个答案: