zoukankan      html  css  js  c++  java
  • FF中flash滚轮失效的解决方案

    概述

    在FF浏览器中有这样一个bug,就是当鼠标hover在flash区域的时候,滚轮会失效。原因是ff浏览器没有把滚轮事件嵌入到flash里面去。如果这个flash很小的话,比如直播的视频,会很容易解决;如果这个flash很大占满全屏的话,就会严重影响到体验了。下面是我查资料实践出来的2个解决方案,供以后开发时参考。

    加一层蒙版

    第一种解决方法是在flash的上层加一层透明的蒙版。一般来说,会在flash上面放各种内容,这个时候把这些内容放在一个蒙版里面,并且把这个蒙版的大小设置为和flash一般大就可以了。

    这个方法的优点是,滑动非常顺畅,改动方便;缺点是如果flash要触发一些hover事件的话就不能实现了。因为上面有一层蒙版。

    代码模拟滚轮

    可以用js监测滚轮事件,并且控制滚轮滚动

    代码如下:

    var isFF = navigator.userAgent.toLowerCase().indexOf('firefox');
    var scroll = $(window).scrollTop();
    var delta = event.detail / 3;
    var mousewheel=function(event) {
        var event = event ? event : window.event;
        var obj = event.srcElement;
        if (!obj) {
            obj = event.target;
        }
        if(isFF > 0) {
            $(window).scrollTop(scroll + delta*20);
            event.preventDefault();
            event.stopPropagation();
        } else {
            return false;
        }
    };
    if(isFF > 0) {
        document.body.addEventListener("DOMMouseScroll", mousewheel, false);
        document.body.onmousewheel=mousewheel;
    }
    

    这种方法的优点是没有什么副作用,缺点是滚动很僵硬,不够顺滑。

    思考

    受上面jq模拟滚轮的启发,有如下思考:

    1. 是不是可以自己来实现滚动区域?但是怎么实现滚动顺滑?
    2. 如果滚动滚轮触发的是滚动一整个页面,是不是可以做单屏了?

    以后再探究了。

  • 相关阅读:
    【Python】使用socketserver建立一个异步TCP服务器
    阻塞式I/0 和 非阻塞式I/O 同步异步详细介绍
    练习题|并发编程
    log4j写数据库存在单引号问题
    javascript复制网页表格内容
    在cxf中使用配置避免增加字段导致客户端必须更新的问题
    启用了不安全的 HTTP 方法
    会话标识未更新
    跨站点请求伪造
    java操作properties文件
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9281656.html
Copyright © 2011-2022 走看看