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

添加滚动条至网页是一项常见需求，有多种方法可以实现。通过JavaScript获取浏览器窗口的宽高是一种有效的方式，根据窗口大小调整样式，可以智能地控制滚动条的出现。以下是具体实现步骤，供朋友们参考：

一、修改index.template.html文件，嵌入一段JavaScript代码以获取浏览器窗口的宽高。我们需要根据窗口的实际大小来动态调整页面元素的样式。这里的关键点是理解`html`和`body`元素的`height`和`width`属性。当这些属性设置为具体数值时，可能会出现滚动条；当设置为百分比时，它们会占据窗口的全部空间。

二、以下是具体的JavaScript代码（假设Application的理想尺寸为1100X600）：

```javascript

var winWidth = 0;

var winHeight = 0;

function findDimensions() {

// 获取窗口宽度

if (windownerWidth) {

winWidth = windownerWidth;

} else if ((document.body) && (document.body.clientWidth)) {

winWidth = document.body.clientWidth;

}

// 获取窗口高度

if (windownerHeight) {

winHeight = windownerHeight;

} 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"; // 如果窗口宽度小于1100px，设定页面宽度为1100px

} else {

cssSize[0].style.width = "100%"; // 否则，让页面宽度自适应窗口宽度

}

if(winHeight < 600) {

cssSize[0].style.height = "600px"; // 如果窗口高度小于600px，设定页面高度为600px

} else {

cssSize[0].style.height = "100%"; // 否则，让页面高度自适应窗口高度

}

}

window.onresize = findDimensions; // 窗口大小变化时，重新计算尺寸

function pageInit() { // 页面加载时执行函数，获取数值

findDimensions();

}

```

三、在您的代码中调用`pageInit()`函数来初始化页面尺寸的调整。通过这种方式，您的页面将能够根据用户浏览器的窗口大小动态调整样式，控制滚动条的出现。这有助于提升用户体验，确保内容在不同设备上都能良好展示。