【解决】页面过长导致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的源码里面,而原来添加的两个鼠标事件去掉,初始化时加入以下代码

@H_100_403@stage.addEventListener(MouseEvent.MOUSE_OVER,

@H_100_403@function(e: MouseEvent) : void {

@H_100_403@    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;};}");

@H_100_403@});

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

@H_100_403@});

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

相关文章

获取网络发布的webservice wsdl: http://www.flash-mx.com/ws/months.cfc?wsdl   GetMonths.mxml   ...
在开发四国军棋的游戏中,通过 flex联机游戏开发- 四国军棋游戏(五)-提炼棋类开发api,我们提炼出了第一...
  1.准备工具 Java SDK 1.5 或更高版本 Tomcat 6.0 或更高版本 Eclipse 3.3 或更高版本 Flex Builder ...
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="ht...
flex4 beta发布了,它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个...
     昨晚看了flex4中项目渲染器itemRenderer的知识,今天自己动手写一个,增强记忆,做一个简单类...