Html 移动网站滚动
在我的移动网站上向下滚动页面时，内容消失，并显示灰色和白色的小正方形。一旦停止滚动，内容将重新出现 有没有办法防止这种情况发生 我的代码：Html 移动网站滚动,html,mobile,scroll,smooth-scrolling,Html,Mobile,Scroll,Smooth Scrolling,在我的移动网站上向下滚动页面时，内容消失，并显示灰色和白色的小正方形。一旦停止滚动，内容将重新出现 有没有办法防止这种情况发生 我的代码： <html> <head> <title>PHP Test</title> <!-- Code within Head Tag --> <script type="text/javascript" src="jquery.js"></scr
<html>
<head>
<title>PHP Test</title>
<!-- Code within Head Tag -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#loading").hide();
})
</script>
<!-- Code within Head Tag -->
<style type="text/css">
/* Document Styles */
#wrapper{
width:800px;
height:500px;
margin:0 auto;
padding:5px;
border:1px solid #CCC;
background:#CCC;
}
.desc{
margin:5 auto;
width:800px;
text-align:left;
}
/* Loading Div Style */
#loading{
position:absolute;
width:300px;
top:0px;
left:0%;
margin-left:5px;
text-align:left;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
body {
overflow: hidden
}
</style>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<center>
<form>
<!-- Loading Div -->
<div id="loading">
Fetching Hotels, please wait..
<img src="loading.gif" alt="loading.." />
</div>
<!-- Loading Div -->
<br>
<input type=text value="destination" name=title onclick="this.value = '';"><br>
Date:<br>
<select name="month">
<option value="1">January
<option value="2">February
<option value="3">March
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">August
<option value="9">September
<option value="10">October
<option value="11">November
<option value="12">December
</select>
<select name="day">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<select name="year">
<option value="2012">2012
<option value="2013">2013
<option value="2014">2014
</select>
<br><br>
No. of Nights:
<select name="nights">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
</select>
<input type=submit>
<?php
// specify url of xml file
$url = "http://xmlfeed.laterooms.com/index.aspx?aid=1000&rtype=4&kword=".$_GET['title']."&sdate=".$_GET['year']."-".$_GET['month']."-".$_GET['day']."&nights=".$_GET['nights']."&orderby=hoteldistance&sortorder=asc";
// get xml file contents
$xml = simplexml_load_file($url);
// loop begins
$i = 0;
foreach($xml->hotel as $hotel)
{
if (++$i > 20) {
// stop after 5 loops
break;
}
// begin new paragraph
echo "<p>";
echo "<img src=".$hotel->images." height=100 width=100><br/>";
echo "<strong>Hotel Name:</strong> ".$hotel->hotel_name."<br/>";
echo "<strong>Prices From:</strong> £".$hotel->prices_from."<br/>";
echo "<a href=".$hotel->hotel_link."><img src=http://affiliates.laterooms.com/AffiliateImages/en/buttons/more_details1.gif></a><br/>";
echo "<strong>Miles from ".$_GET['title']."</strong> ".$hotel->hotel_distance."<br/>";
echo "</p>";
// end paragraph
}
$cnt++;
// loop ends
?>
</form>
</center>
</body>
</html>
我想你无法阻止这一切。可能会有一个棘手的解决办法 我认为这就是浏览器和渲染的工作方式。仅呈现页面的可见部分，如果滚动页面，则必须呈现新的可见区域。在此之前，它会显示棋盘。但是，为了节省资源并出于性能原因避免不稳定的滚动，只有在停止滚动时才会进行渲染 因此，解决方案部分： 如果你创建自己的滚动机制，你可以实现你想要的，但也有一些缺点。这可能很慢，可能会导致某些移动浏览器不兼容，等等 其基本思想是将内容放置在一个带有溢出：隐藏的全屏div中，并使用javascript捕获和覆盖touchstart、touchend、touchmove、touchcancel事件，自己滚动div的内容，显示自己的滚动条等。这并不太复杂，但是，如果你想用反弹和过卷以及其他一切来做正确的事情，还有很多事情要做。请参阅iscroll4，它可以为您做到这一点：