Question

我正在创建一个聊天服务，一切正常，除了一个小细节，滚动条。我正在使用jQuery Custom Scrollbar插件。

它没有深究，有时它确实很好，但有时候它会停留在最后一条消息的一半，我已经在这个细节工作了一个星期，我无法弄清楚问题是什么

这是我的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>---</title>

    <!-- Main CSS -->
    <link rel="stylesheet" href="css/default.css">
    <!-- Extra CSS -->        
    <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet"/>
    <!-- All JS Scripts-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.min.js"></script>
    <script type="text/javascript" src="js/jquery.elastic.source.js"></script>
    <script type="text/javascript" src="js/jquery.xdomainrequest.min.js"></script>
    <script type="text/javascript" src="js/flowtype.js"></script>
    <script type="text/javascript" src="js/cpg_smartphones_proto.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <!-- Perfect Scrollbar 
    <link href="css/perfect-scrollbar.css" rel="stylesheet">
     <script src="js/perfect-scrollbar.js"></script>-->
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/ie.css">
    <![endif]-->
    <!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="css/ie8.css" />
    <![endif]-->

    <!--[if !IE]><!--><script>  
    if (/*@cc_on!@*/false) {  
        document.documentElement.className+=' ie10';  
    }  
    </script><!--<![endif]-->  
</head>
<body onload="initialize()">

<div class="row">
        <div id="chat_intro">
                <div class="chat_caller" onclick="goToChat()">
                    <h1>Enter</h1>
                </div>
            </div>
        </div>

    <div id="chat_box">
        <div id="chat_top" hidden="hidden">
            <div id="chat_header">
                <h4>Personal support</h4>
                <p>Find the best product for you.</p>
            </div>
            <div id="chat_avatar"></div>
        </div>


            <div id="chat_container">
                <div id="history_div">
                    <div id="history_mc">

                    </div>
                </div>

        </div>

        <div id="chat_footer">
                <textarea id="input_area" type="text" onkeypress="chatHandler(event)">                  
            </textarea>
        </div>

    </div>
</div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#chat_box').hide();
            $('#chat_footer').hide();
        });
    </script>

    </script>-->
</body>
</html>

现在，JS：

    function goToChat() {
    origin = BANNER_NAME + "_" + uid + metaData;

    $("#chat_intro").hide();
    $("#chat_box").show();
    $("#chat_top").show();
    $("#chat_container").show();
    $("#chat_footer").show();
    $("#history_div").mCustomScrollbar( {
        theme : "dark-thick",
        advanced : {
            updateOnContentResize : true
        }
    });
    document.getElementById('input_area').focus();
    chat();
    }
    function chatHandler(event) {
    // ENTER key
    var key;
    if (window.event) // IE8 and earlier
    {
        key = event.keyCode;
    } else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
    {
        key = event.which;
    }

    InputInterface.restartTimeout();

    if (key == 13) {        
        chat();        
        $('#input_area').focus();
        event.keyCode = 0;
    }
}
function chat() {
    // Build request
    var chatText = "";
    if (!initialized) {
        chatText = "hi";
    }
    else {
        chatText = input_area.value;
        if(chatText.trim()=="")return;
        var userAnswer = USER + input_area.value + TIME + getTimeStamp() + TIME_END + FONT_END;
        history_mc.innerHTML += userAnswer;

        $("#history_div").mCustomScrollbar("update");
        setTimeout(function(){
                        $("#history_div").mCustomScrollbar("scrollTo", "bottom");
                    });
        $(input_area).val("");

        if(getUrlParameter("isMobile") == "true") hideKeyboard();

    }

    $("#deleteThis").remove();
    InputInterface.prepareSending(chatText);
    setTimeout(function(){history_mc.innerHTML += TYPING_MESSAGE; 
    $("#history_div").mCustomScrollbar("scrollTo", "bottom");});

    if(!initialized){
        InputInterface.flush();
        initialized = true;
    }
}
    //Start calling recursively getMsgId until the retries max out or succesfully get an Id
    function getResponse(json) {
    start = new Date().getTime();
    processRetries = 0;
    responseRetries = 0;
    getMessageId(json);
}
function displayResponse(response) {
    $("#deleteThis").remove();
    history_mc.innerHTML += BM_INI+ response_number +BM_FIN + response + TIME + getTimeStamp() + TIME_END + FONT_END;
    $("#history_div").mCustomScrollbar("update");
    setTimeout(function(){
                if (DEBUG) console.log("#conv"+response_number);
                $("#history_div").mCustomScrollbar("scrollTo", "#conv"+response_number);
                response_number++;
                },250);
    document.getElementById('input_area').focus();
}

我希望你能用你的绝地权力照耀我，非常感谢你。

问候。

jQuery自定义滚动条不会向下滚动

0 个答案: