【解决】页面过长导致FlexPaper滚动条无法控制

版权归本博主，转载需注明出处。

【分析】

1、网页嵌入flash后会覆盖html dom 元素，使用wmode为transparent时可以解决覆盖问题，因为此时它已经透明了。

2、transparent带来另一个问题，鼠标滚轮控制不了flash中的滚动条。

3、思路：通过js捕获鼠标滚轮事件，js调用flash方法传递滚轮->flash组件调用滚轮事件传递的参数。

【处理】

1、在引用FlexPaper的页面添加如下JS：

? /**********鼠标滚轮*********/

? ?function addMouseWheelListener(){ ?

? ?var flash = $FlexPaper('documentViewer'); ?

? ?var ua = navigator.userAgent;?

? ?console.log(ua.indexOf("Firefox"));

? ??

? ?if(ua.indexOf("Firefox") > -1){ ?

? ? ? ? ? flash.addEventListener('DOMMouseScroll',onWheelZoom,false);

? ?}else if(ua.indexOf("MSIE") == -1){ ?

? ? ? ?flash.addEventListener('mousewheel',false);

? ?}else{ ?

? ? ? ?flash.attachEvent('onmousewheel',onWheelZoom);

? ?}?

? ?flash.attachEvent('onmousewheel',onWheelZoom); ? ?

}?

function onWheelZoom(event){ ? ?

? ?var app = $FlexPaper('documentViewer');?

? ?if (app) { ? ?

? ? ? ?var o= {delta: event.wheelDelta};

? ? ? ?$FlexPaper('documentViewer').jsWheelZoom(o); ? ?

? ?}?

}?

2、在FlexPaper源码入口的init方法中添加如下监听：

//滚轮控制滚动条

ExternalInterface.addCallback("jsWheelZoom",jsWheelZoom);?

ExternalInterface.call("addMouseWheelListener"); ?

3、再实现两个方法：

/********滚轮事件实现************/

private 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.FlexPaper.verticalScrollPosition += 1; ?

if(this.FlexPaper.verticalScrollPosition > this.FlexPaper.maxVerticalScrollPosition) ? { ?

this.FlexPaper.verticalScrollPosition = this.FlexPaper.maxVerticalScrollPosition ?

} ?

} ? ?

if(e.delta<-2) ? ? { ? ?

this.FlexPaper.verticalScrollPosition -= 1; ? ? ??

if(this.FlexPaper.verticalScrollPosition < 0) ? { ?

this.FlexPaper.verticalScrollPosition = 0; ?

} ? ? ? ? ? ? ??

}

//Alert.show("进来了！！！！！");

}

以上方法并不能完全使得Flexpaper的滚动条在各个浏览器下都能正常使用，于是有了下面的方法，把相应的JS操作写在Flexpaper的源码里面，而原来添加的两个鼠标事件去掉，初始化时加入以下代码：

stage.addEventListener(MouseEvent.MOUSE_OVER,

function(e: MouseEvent) : void {

? ? ExternalInterface.call("eval","if(navigator.userAgent.indexOf ('Firefox')>0){var __on_flash_wheel=function(e){e.preventDefault(); e.stopPropagation();};window.addEventListener('DOMMouseScroll',__on_flash_wheel,false);}else{document.onmousewheel=function(){return false;};}");

});

stage.addEventListener(MouseEvent.MOUSE_OUT,"if (navigator.userAgent.indexOf('Firefox')>0){window.removeEventListener ('DOMMouseScroll',false);}else {document.onmousewheel=null;}");

});

编译后替换FlexPaperViewer.swf文件，滚动条在各个浏览器都能正常浏览了！