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

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个方法只要能给出一个方法就行，能解决问题的，不甚感激！！！

...全文

254 7 打赏收藏转发到动态举报

写回复

用AI写文章

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>