transparent透明模式下控制Flash组件的滚动条

在做WEB开发的过程中可能会遇到Flash组件遮挡页面中DOM元素的情况，可以在插入Flash的embed或object标签中加入“wmode”属性并设置其值为“transparent”（透明模式）解决此问题，但是透明模式会随之带来另一个麻烦：鼠标滚轮无法控制Flash中的滚动条。

虽然Flash组件中的滚动条无法用鼠标滚轮控制，但是JS依然可以捕捉鼠标滚轮事件并传递给Flash中的相应函数，利用此原理可以重建Flash组件的鼠标滚轮操作。

 

以Flex dataGrid组件滚动条为例：

1. 在组件MXML页面的初始化init()方法中添加JS监听，代码如下：

// 绑定JS监听方法
ExternalInterface.call("addMouseWheelListener");
// 创建回调函数
ExternalInterface.addCallback("jsWheelZoom", jsWheelZoom);

 

2.在JS文件中实现监听，代码如下（em元素内为自定义组件对象标识）：

// 根据浏览器添加JS鼠标滑轮滚动监听
function addMouseWheelListener() {
	var viFlash = thisMovie("Bottom");
	var ua = navigator.userAgent;
	if (ua.indexOf("Firefox") > -1) {
		viFlash.addEventListener("DOMMouseScroll", onWheelZoom, false);
	} else {
		if (ua.indexOf("MSIE") == -1) {
			viFlash.addEventListener("mousewheel", onWheelZoom, false);
		} else {
			viFlash.attachEvent("onmousewheel", onWheelZoom);
		}
	}
}
// 滚轮滑动触发监听调用 AS中的相应方法
function onWheelZoom(event) {  
	var app = window.document["Bottom"];
	if (app) {
		var o = {delta:event.wheelDelta};
		thisMovie("Bottom").jsWheelZoom(o);
	}
}
// 根据传入标识得到对象
function thisMovie(movieName) {
	if (navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName];
	} else {
		return document[movieName];
	}
}

 

3.回到Flex实现AS回调函数，代码如下（em元素内为自定义dataGrid对象标识）：

// 接收JS滚轮事件
public function jsWheelZoom(o:Object):void {
	var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_WHEEL,true);  
    e.delta = -(o.delta);
    onWheelZoom(e); 
}
// 实现滚动条操作
private function onWheelZoom(e:MouseEvent):void {
	if(e.delta>2)  
	{  
		this.vms_grid.verticalScrollPosition += 1;
		if(this.vms_grid.verticalScrollPosition > this.vms_grid.maxVerticalScrollPosition)
		{
			this.vms_grid.verticalScrollPosition = this.vms_grid.maxVerticalScrollPosition
		}
	}  
	if(e.delta<-2)  
	{  
		this.vms_grid.verticalScrollPosition -= 1;     
		if(this.vms_grid.verticalScrollPosition < 0)
		{
			this.vms_grid.verticalScrollPosition = 0;
		}             
	}  
}