哇，一件又一件!好吧。所以我一直在跟随一个例子，在制作一个工作聊天框-它工作正常(在浏览器-服务器交互方面，减去一些明显的安全的东西，我可能应该实现)。
然而，我正在尝试改变我的聊天框的样式，以便我可以在任何浏览器中滚动，包括移动浏览器。实际上，问题不在于能够自动滚动——CSS中的overflow:auto属性在每个浏览器中都可以工作，除了一个小细节。
如果你用手机浏览器测试，你会发现你可以一直滚动到底部…但是当你到达最后的时候，文本框似乎会弹回来，而不是停留在最后。不是一直到顶部，但像3个像素左右。我真的不知道该怎么办。我研究过手机浏览器中的"橡皮筋"效应，但我不确定这是否与我的问题有关。是吗?或者它可能与我在后端在聊天框中发布的div更相关?
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";
}
?>
尝试添加
position: relative;
到聊天框