给页面添加滚动条 FLEX给页面添加滚动条实现思路及代码

时间:2021-03-20 人气:0

想了解FLEX给页面添加滚动条实现思路及代码的相关内容吗，在本文为您仔细讲解给页面添加滚动条的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：FLEX,添加滚动条，下面大家一起来学习吧。

修改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(); 

} 

加载全部内容