dougu4704 2015-10-25 14:11
浏览 57
已采纳

移动浏览器故障中的CSS自动溢出

Wow, one thing after another! Okay. So I've been following an example in making a working chatbox- and it works properly (in terms of browser-server interaction, minus some obvious security things I probably should be implementing).

HOWEVER, I am trying to change the styling of my chatbox so that I can scroll in any browser, including mobile ones. Really, the problem is NOT being capable of scrolling in and of itself- overflow:auto property in CSS does work in every browser, save for just one small detail.

If you test this with a mobile browser, you'll find that you can scroll all the way to the bottom... but just when you get to the end, the textbox seems to snap a little bit of a ways back up instead of staying at the end. NOT ALL THE WAY TO THE TOP, but like 3 pixels or so. I really don't know what to do. I've researched a thing called a "rubber band" effect in mobile browsers, but I'm not quite sure that's related to my problem. Is it? Or is it possibly more related to the divs I'm posting inside the chatbox from the back end?

chatroom.php

<?php session_start();
#session_regenerate_id(true);
include ("dbconfig.php");
if(!isset($_SESSION['introd']))
{   
    header("Location: intro.php");
}
if(!isset($_SESSION['user']))
{   
    header("Location: index.php");
}
 ?>
<!DOCTYPE html>
 <html>
<head>
    <title>My Webpage</title>
<!--    <meta name = "viewport" content = "width=device-width, initial-scale=1.0"/>-->
    <link rel = "stylesheet" type = "text/css" href = "site.css" />
    <link rel="shortcut icon" href="index.html?img=favicon" type="image/ico" />
    <script>




        </script>
</head>

<body>
    <?php include("header.php"); ?>

                <div id="wrapper">
                    <div id="menu">
                        <p class="welcome">Welcome, <b><?php echo $_SESSION['user']; ?></b></p>
                        <div style="clear:both"></div>
                    </div>

                    <div id="chatbox"><?php
                    if(file_exists("log.html") && filesize("log.html") > 0){
                        $handle = fopen("log.html", "r");
                        $contents = fread($handle, filesize("log.html"));
                        fclose($handle);

                        echo $contents;
                    }
                    ?></div>

                    <form name="message" action="">
                        <input name="usermsg" type="text" id="usermsg" size="63" />
                        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
                    </form>
                </div>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
                <script type="text/javascript">
                // jQuery Document
                $(document).ready(function(){
                    setInterval (loadLog, 2000);    //Reload file every 2500 ms or x ms if you wish to change the second parameter

                    //If user submits the form
                    $("#submitmsg").click(function(event){

                        var clientmsg = $("#usermsg").val();
                        $.post("post.php", {text:clientmsg});
                        //alert("About to post");
                        //event.preventDefault();
                        /*$.ajax({
                            type: "POST",
                            url: "post.php",
                            data: {text:clientmsg},
                            //dataType: text,
                            error: function(){
                                alert("Error receiving text");
                            },
                            success: function(response){
                                alert("Submission received: " + response);
                            },
                        });*/
                        $("#usermsg").attr("value", "");
                        return false;
                    });

                    //Load the file containing the chat log
                    function loadLog(){     
                        var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
                        $.ajax({
                            url: "log.html",
                            cache: false,
                            success: function(html){        
                                $("#chatbox").html(html); //Insert chat log into the #chatbox div   

                                //Auto-scroll           
                                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
                                if(newscrollHeight > oldscrollHeight){
                                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                                }               
                            },
                        });
                    }
                });
                </script>

                <center><a href='logout.php'>Logout</a></center>    

            <p class = "content"> This is a page that is a scrap work in progress. </p>


            <?php include("footer.php"); ?> 
    </body>
</html>

site.css

a {
    text-decoration: none;
    color: green;
    }

    p {
        font-family:"sans-serif";
        font-size:1.875em;
        color: white;
        text-align: center;
        font-style: bold;
    }

    p.welcome {
        font-family:"verdana";
        font-size:1.875em;
        color: white:
        text-align: center;
        font-style:bold;
    }

    p.content {
        font-family:"verdana";
        font-size:1em;
        color: white;
        font-style: italic;
    }

    p.nostyling {
        color:black;
    }

    div.contentContainer {
        border: 1;
        cellspacing: 5;
        cellpadding: 15;
        width: 50%;
        bgcolor: 251111;
    }

    img{
        display:block;
        margin:auto;
    }

    div.main {
        width:50%;
        margin:auto;
        background:#251111;
    }

    div.bridge {
        width:100%
    }

    div.deck {
        width:100%
    }

    div.control {
        float:left;
        margin:0;
        padding:1em;
        color:white;
    }

    div.arsenal {
        margin-left:25%;
        background-color:#0A1616;
        padding: 1em;
        border: 15px solid #251111;
    }

    body {
        background-color: #393635;
        color: blue;
    }

    #wrapper, #loginform {
    margin:0 auto 0 -7;
    padding-bottom:25px;
    width:450px;
    border:2px solid #ACD8F0; }

#loginform { padding-top:18px; }

    #loginform p { margin: 5px; }

#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;}

#usermsg {
    width:395px;
    border:1px solid #ACD8F0; }

#submit { width: 60px; }

.error { color: #ff0000; }

#menu { padding:12.5px 25px 12.5px 25px; }


.msgln { margin:0 0 2px 0; }

post.php

<?php
session_start();
if(isset($_SESSION['user'])){
    $text = $_POST['text'];

    $fp = fopen("log.html", 'a') or die("Unable to open/write file!");
    #chmod("log.html", 0777);
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['user']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
    fclose($fp);
    echo "Just wrote the file";
}
?>

展开全部

  • 写回答

1条回答 默认 最新

  • dsf5989 2015-10-25 15:35
    关注

    Try adding

    position: relative;
    

    to the chatbox

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 pycharm倒入虚拟环境的时候,显示这个,但是我的虚拟环境已经创建了
  • ¥15 FPGA芯片60进制计数器
  • ¥15 前端js怎么实现word的.doc后缀文件在线预览
  • ¥20 macmin m 4连接iPad
  • ¥15 DBIF_REPO_SQL_ERROR
  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部