【解决】页面过长导致FlexPaper滚动条无法控制
来源:互联网 发布:linux命令启动sh脚本 编辑:程序博客网 时间:2024/06/05 03:21
版权归本博主,转载需注明出处。
【分析】
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',onWheelZoom,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,
function(e: MouseEvent) : void {
ExternalInterface.call("eval", "if (navigator.userAgent.indexOf('Firefox')>0){window.removeEventListener ('DOMMouseScroll', __on_flash_wheel, false);}else {document.onmousewheel=null;}");
});
编译后替换FlexPaperViewer.swf文件,滚动条在各个浏览器都能正常浏览了!
- 【解决】页面过长导致FlexPaper滚动条无法控制
- 页面内容过长,如何定位页面滚动条
- 页面滚动条控制详细
- jquery控制页面滚动条
- python+selenium控制谷歌页面滚动条导致白页的问题解决
- 解决flexpaper+swfobject在线预览滚动条不能滚动的问题
- 微信开发安卓页面出现两个滚动条其中一条无法滚动可以采用局部区域滚动解决
- 解决滚动条出现,页面抖动问题
- 因滚动条出现而导致页面晃动的解决方案
- 阻止因出现滚动条导致页面抖动
- 解决Silverlight插件过长浏览器滚动条不出现的问题
- Android:文本过长,实现添加滚动条
- 网页加载的时候timing中的waiting时间过长导致页面加载过慢解决。
- Asp.net l利用Div控制页面滚动条
- jsp页面iframe控制滚动条的显示
- js控制html页面滚动条到底端触发事件
- jQuery 控制页面滚动条显示和隐藏
- iframe根据自身高度控制父页面滚动条长度
- 【转载】mybatis中关于传入参数parameterType
- Flex4中关于无法构建字体错误
- 【转载】优雅抒情的浪漫小提琴曲
- Open Flash Chart 扩展实现
- Understanding JavaScript OOP—prototypical inheritance on awesomeness!
- 【解决】页面过长导致FlexPaper滚动条无法控制
- 【疑问】什么时候使用存储过程比较适合
- android命令查看cpu与内存使用率
- Linux常用命令
- 【二次开发】去除flexpaper的LOGO,双页模式下不再出现
- AS3点击按钮跳转到指定url
- JS判断各种浏览器
- JAVA开发人员必备的免费JSP空间
- JS创建类和对象