中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

我用PHP創(chuàng)建了一個簡單的聊天框.我希望這能夠加載所有新消息并滾動到聊天框的底部.我正在使用AJAX重新加載新郵件,但似乎無法將其向下滾動到新郵件顯示的底部.

我嘗試過使用down.scrollTop = down.scrollHeight;但不能讓它正常運作.

有什么幫助嗎？

<div id="tab3">    <h2>Chat Room</h>    <div id="c-input_wrap">        <div id="chatlog">            Loading chat please wait...        </div>        <div id="chatwrap">            <div id="chatinput">                <form name="chatbox" class="userchat">                    <input class="userchat" name="message" type="text" autocomplete="off" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()" autofocus/><br>                    <input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />                </form>            </div>        </div>    </div></div><script>var form = document.querySelector('form[name="chatbox"]');form.addEventListener("submit", function (event) {    event.preventDefault();});function submitChat() {    if(chatbox.message.value == '') {        alert('Error: Missing Fields.');        return;    }    var message = chatbox.message.value;    var xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {        if(xmlhttp.readyState==4&&xmlhttp.status==100) {            document.getElementById('chatlog').innerHTML = xmlhttp.responseText;        }    }    xmlhttp.open('GET','chat.php?message=' message, true);    xmlhttp.send();    chatbox.reset();}$(document).ready(function(e) {    $.ajaxSetup({cache:false});    setInterval(function() {$('#chatlog').load('logs.php');}, 200);});</script>

CSS：

#tabs {    overflow: hidden;    max-width: 100%;    margin: 0;    padding: 0;    list-style: none;}#tabs li {    float: left;    margin: 0px -15px 0 0;}#tabs a {    float: left;    position: relative;    padding: 0 20px;    height: 0;    line-height: 30px;    text-transform: uppercase;    font-weight: bold;    text-decoration: none;    color: #FFFFFF;    border-right: 20px solid transparent;    border-bottom: 30px solid #3D3D3D;    opacity: .3;    filter: alpha(opacity=30);    transition: all .5s;}#tabs a:hover,  #tabs a:focus {    border-bottom-color: rgba(255,0,4,0.60);    opacity: 1;    filter: alpha(opacity=100);}#tabs a:focus {    outline: 0;}#tabs #current {    z-index: 10;    border-bottom-color: #3d3d3d;    opacity: .8;    filter: alpha(opacity=100);    cursor: default;}#content {    background-color: rgba(0,0,0,0.10);    border-top: 3px solid rgba(61,61,61,0.80);    padding: 2em;/*height: 220px;*/    overflow-y: auto;    height: 85%;}#content h2,  #content h3,  #content p {    margin: 0 0 15px 0;}#chatlog {    position: absolute;    margin-left: auto;    margin-right: auto;    left: 0;    right: 0;    padding: 0;    text-align: left;    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;    color: #000000;    background-color: rgba(255,255,255,0.70);    border-top: solid 2px rgba(235,0,3,0.70);    width: 95%;    height: 88%;    overflow-y: auto;     word-wrap: break-word;}#c-input_wrap {    position: absolute;    margin-left: auto;    margin-right: auto;    left: 0;    right: 0;    padding: 0;    height: 63%;}#chatinput {    position: absolute;    margin-left: auto;    margin-right: auto;    left: 27%;    right: 25%;    width: 70%;}#chatwrap {    position: absolute;    height: 40px;    width: 95%;    margin-left: auto;    margin-right: auto;    left: 0;    right: 0;    bottom: -10px;}input.userchat {    display: inline-block;    float: left;    margin-left: 0;    width: 50%;    padding: 10px;    border: none;    border-bottom: solid 2px #3D3D3D;    transition: border, background-color .75s;    background-color: rgba(255,255,255,0.70);    font-weight: bold;    line-height: 18px;    color: #000000;}input:focus.userchat {    background-color: rgba(255,255,255,0.90);    border-bottom: solid 2px rgba(235,0,3,0.69);    outline: 0;    color: rgba(61,61,61,1.00);    font-weight: bold;}input[type=button].userchat {    display: block;    margin-top: -23px;    margin-left: 2px;    text-align: center;    padding-left: 2px;    float: left;    width: 40px;    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;    color: rgba(61,61,61,0.70);    font-size: 16px;    background: rgba(255,255,255,0.70);     border-bottom: solid 2px #3D3D3D;    cursor :pointer;    transition: all .75s;}input[type=button].userchat:hover,input[type=button].userchat:focus  {    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;    color: #000000;    font-size: 16px;    border-bottom: solid 2px rgba(235,0,3,0.69);    background: rgba(255,255,255,0.90);     cursor: pointer;}

chat.php：

<?php    error_reporting(E_ALL & ~E_NOTICE);    session_start();    if  (isset($_SESSION['id'])) {        $userId = $_SESSION['id'];        $username = $_SESSION['username'];        $userLabel = $_SESSION['nickname'];    }    $connect = mysqli_connect("", "", "", "webclyde_root");    mysqli_select_db($connect, "webclyde_root");    $message = $_REQUEST['message'];    mysqli_query($connect, "INSERT INTO chat (name, message) VALUES ('$userLabel', '$message')");    $result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");    while ($extract = mysqli_fetch_assoc($result1)) {        echo $extract['name'] . ": " . $extract['message'];    }?>

logs.php

<?php    error_reporting(E_ALL & ~E_NOTICE);    session_start();    if  (isset($_SESSION['id'])) {        $userId = $_SESSION['id'];        $username = $_SESSION['username'];        $userLabel = $_SESSION['nickname'];    }    $connect = mysqli_connect("", "", "", "webclyde_root");    mysqli_select_db($connect, "webclyde_root");        $result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");    while ($extract = mysqli_fetch_assoc($result1)) {        echo "<br>" . $extract['name'] . ": " . $extract['message'];    }?>

解決方法:

要使其動畫化,您可以使用jQuery .animate()函數(shù).

使用：

var log = $('#chatlog');log.animate({ scrollTop: log.prop('scrollHeight')}, 1000);

jsFiddle示例：http://jsfiddle.net/00xsrck8/

或者沒有動畫使用：

var log = $('#chatlog');log.animate({ scrollTop: log.prop('scrollHeight')}, 0);

使用提供的css來完成此任務.請參閱jsfiddle：http://jsfiddle.net/00g2LnqL/