如何使页加载完成前,滚动条失效

mxrxhy010 2009-08-14 09:21:36
这是我的一段代码:
<style>
.black_overlay{ display: none; position:absolute; margin-top: 0%; margin-left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=55); }
.white_content { display: none; position:absolute; margin-top:: 27%; margin-left: 28%; width: 44%; height: 46%; padding: 16px; border: 4px solid orange; background-color: white; z-index:1002; overflow: auto; }
</style>


<body onload="document.getElementById('light').style.display='block';document.body.scroll='no';document.getElementById('fade').style.display='block'">

现在问题是如果页面没完全载入,用户就拉动滚动条的话,弹出的.black_overlay和.white_content 就无法显示在当前的屏幕,而是在顶部。所以我想问问有没有什么办法在页面加载完成前,让滚动条失效无法滚动,因为onload只有页面加载完了才会触发。如果不行的话,能否让层根据当前屏幕位置来定位,而不是始终在第一屏的位置,一滚动还是在上面。或者是在onload触发时让页面自动回到顶部,原来用onclick时是可以加个锚的,现在onload没法加,希望高手帮帮忙忙,3个方法只要能给出一个方法就行,能解决问题的,不甚感激!!!
...全文
207 点赞 收藏 7
写回复
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
mxrxhy010 2009-08-17
我自己解决了,不过还是谢谢了
回复
mailbao 2009-08-15

<html><head>
<script type="text/javascript" defer="true">
var oDiv = document.getElementById("div1");
oDiv.innerText = "测试加载内容";

function showState()
{
// 判断 当前页面是否载入完毕
if(window.document.body.readyState=="complete")
{
document.body.scrollTop=0; //返回页顶
}
}
</script>

</head><body onload="showState()">
<div id="div1"></div>
<div id="div2">加载的内容...</div>
</body></html>
回复
mxrxhy010 2009-08-15
谢谢,不过能不能不通过以上方法,使页面能回到顶部呢,简单点的,就是onload载入时自动回到顶部
回复
mailbao 2009-08-14
如果不用ajax,那可以考慮下jQuery實現內容的先後順序來加載....


又或者參考這種頁面內容的先後順序加載方法


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>精巧软件 www.oldtool.net</title>
</head>
<body>
<script language="javascript" type="text/javascript">
// 按照 期望的次序 排列每个 div 的 Id.
var arr1=new Array("div3","div2","div4","div1");
//var arr1=new Array("if3","if2","if4","if1");
// 期望 次序 div 中的内容.
var arr2=new Array("换成你期望的内容。","inner html 2","inner html 4","inner html 1");
//var arr2=new Array("3.html","2.html","4.html","1.html");
// 期望 次序 中 iframe 的状态.
var arr3=new Array("false","false","false","false");
function showState()
{
// 判断 当前页面是否载入完毕
if(window.document.body.readyState=="complete")
{
for(i=0;i<arr1.length;i++)
{
if(arr3[i]=="false")
{
document.getElementById(arr1[i]).innerHTML=arr2[i];
arr3[i]="true";
return ;
}
}
}
}
// 每间隔 2 秒后调用如上方法, 当然,正常应用应该将此时间间隔设置小一些, 此处 仅 为了方便大家看效果
setInterval("showState()",2000);
</script>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 全部延时加载。 当前页面中的最重要内容不会因 div1 div2 div3 div4 内容的损坏,而不能正常访问。</div>
<div id="div1" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div2" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div3" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div4" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div>这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>

回复
mxrxhy010 2009-08-14
有没有其他简单点的方法啊
回复
mailbao 2009-08-14
結合ajax技術,實現loading加載你的兩個層,
參考例子:頁面加載完成前顯示一個圖片loading.gif


<script type="text/javascript">

var xmlHttp;


//創建一個xmlHttpRequest對象
function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

}


function handleStateChange(){

var img = " <img src='/images/green/loading.gif' style='margin-top:130px; margin-left:250px'>";

if(xmlHttp.readystate == 4){ //表示請求狀態 4為完成

if(xmlHttp.status == 200){ //http狀態指示碼,200表示ok

//將服務器返回信息作為文本插入到DIV容器中

document.getElementById("data").innerHTML = xmlHttp.responseText;

}

}

else document.getElementById("data").innerHTML = img;

//若響應沒完成的話,則顯示loading..

}


function showData(entityName){

var url = "/greengate.action?doing=listResult&entity_name="+entityName;

createXMLHttpRequest();

//請求狀態改變事件觸發handleStateChange事件

xmlHttp.onreadystatechange = handleStateChange;

xmlHttp.open("GET",url);

xmlHttp.send(null);

}

</script>
<div id="data"> </div>
回复
mxrxhy010 2009-08-14
其中light和fade是前后两个层
回复
发动态
发帖子
ASP
创建于2007-09-28

2.8w+

社区成员

ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
申请成为版主
社区公告
暂无公告