Question

我在div中有一个flash对象，当我滚动它时会缩放它的内容。问题是我的页面也滚动，我不知道如何解决这个问题。当我滚动闪光灯时，我需要页面静止不动。

我尝试添加此

 flashContainer.bind('mousewheel DOMMouseScroll', function(e) {
                var scrollTo = null;

                if (e.type === 'mousewheel') {
                    scrollTo = (e.originalEvent.wheelDelta * -1);
                } else if (e.type === 'DOMMouseScroll') {
                    scrollTo = 40 * e.originalEvent.detail;
                }

                if (scrollTo) {
                    e.preventDefault();
                    $(this).scrollTop(scrollTo + $(this).scrollTop());
                }
            });

但由于preventDefault，flash对象将不再缩放。

你有什么建议吗？

Answer 1

这可能适合你：

$("element").hover(function(){
    var scrollT = $(document).scrollTop();
    $(document).on("scroll", function(e){
        $(document).scrollTop(scrollT);
    });
}, function(){
    $(document).off("scroll");
});

http://jsfiddle.net/ZFsDY/3/

Answer 2

另一次尝试：

$("element").bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var d = e.wheelDelta || -e.detail;
    var s;
    if(d < 0) s = 1;
    else s = -1;
    this.scrollTop += s * 30;
    e.preventDefault();
});

http://jsfiddle.net/ZFsDY/5/

Answer 3

几个月前我偶然发现了这个问题（我们用来管理滚动的旧方法在最新的浏览器上不起作用）。我不允许为它发布代码，但这里有一些关于我们是如何做到这一点的说明。

与reyaner的答案一样，我们使用事件监听和preventDefault（）来禁用浏览器自动滚动，并获取滚动值（但不使用scrollTop（））。获得该值后，我们将通过ExternalInterface将其发送到Flash。为了能够实现，flash对象必须事先add a Callback，这是一种可以通过Javascript调用的Flash方法。

我们在Flash和JS之间添加了一些额外的交互，这样只有当Flash具有焦点时才会锁定滚动。

警告：所有浏览器的wheelDelta刻度都不同，您可能会发现变焦速度可能会有所不同。为了解决这个问题，我们决定每次调度事件时都使用固定的步骤，而不是按原样使用delta。

HTML在页面和Flash对象中同时滚动

3 个答案: