哇哦，一件接着一件!好的。因此，我一直在关注一个制作工作聊天框的示例 - 它工作正常(就浏览器-服务器交互而言，减去了我可能应该实现的一些明显的安全措施)。
但是，我正在尝试更改聊天框的样式，以便我可以在任何浏览器(包括移动浏览器)中滚动。确实，问题不在于无法滚动本身 - CSS 中的 overflow:auto 属性确实适用于所有浏览器，除了一个小细节。
如果您使用移动浏览器对此进行测试，您会发现您可以一直滚动到底部...但是就在您到达最后时，文本框似乎向后退了一点向上而不是停留在最后。不是一直到顶部，而是大约 3 个像素。我真的不知道该怎么办。我在移动浏览器中研究了一种叫做“橡皮筋”效果的东西，但我不太确定这是否与我的问题有关。是吗？或者它可能与我从后端在聊天框中发布的 div 更相关？
聊天室.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>
网站.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;
到聊天框
关于javascript - 移动浏览器故障中的 CSS 自动溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33335690/