dougu4704
2015-10-25 22:11 阅读 52

移动浏览器故障中的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 dsf5989 2015-10-25 23:35

    Try adding

    position: relative;
    

    to the chatbox

    点赞 评论 复制链接分享

相关推荐