FLEX給頁面添加滾動條實現思路及代碼

2024-09-08 18:17:23

字體：大中小

來源：轉載

供稿：網友

修改index.template.html，加入一段js獲取瀏覽器窗口的寬高，根據瀏覽器窗口寬高修改css樣式，html, body { height:100%; width:100%; }的height和width是百分比還是具體大小，當是具體大小時就會出現滾動條，當是百分比時就會充滿整個窗口。

具體如下：
1.加入以下js原碼(Application大小為1100X600)

復制代碼代碼如下:

 
var winWidth = 0; 
var winHeight = 0; 
function findDimensions() 
{ 
//獲取窗口寬度 
if (window.innerWidth) 
{ 
winWidth = window.innerWidth; 
} 
else if ((document.body) && (document.body.clientWidth)) 
{ 
winWidth = document.body.clientWidth; //獲取窗口高度 
} 
if (window.innerHeight) 
{ 
winHeight = window.innerHeight; 
} 
else if ((document.body) && (document.body.clientHeight)) 
{ 
winHeight = document.body.clientHeight; 
} 
//通過深入Document內部對body進行檢測，獲取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 

var cssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules; 
if(winWidth < 1100) 
{ 
cssSize[0].style.width = "1100px"; 
} 
else 
{ 
cssSize[0].style.width = "100%"; 
} 

if(winHeight < 600) 
{ 
cssSize[0].style.height = "600px"; 
} 
else 
{ 
cssSize[0].style.height = "100%"; 
} 
} 

window.onresize=findDimensions; 

function pageInit() { 
//調用函數，獲取數值 
findDimensions(); 

} 