在頁面和Flash對象中同時進行HTML滾動

我在div內部有一個flash對象，當我滾動它時會縮放它的內容。問題是我的頁面也滾動，我不知道如何解決這個問題。當我滾動閃光燈時，我需要該頁面靜止不動。在頁面和Flash對象中同時進行HTML滾動

我嘗試添加該

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對象將不再放大。

你有什麼建議嗎？

來源

2013-06-26 Cristian Holdunu

你嘗試添加overflow：hidden;徘徊在身體上並在離開時將其取出？ – reyaner

是的，但沒有成功 –

好吧，我設法做你說的，但我不能接受這個解決方案。每次我將鼠標懸停在Flash對象上時，頁面都會被重新渲染，因爲滾動條消失。對用戶體驗來說，這不是一個優雅而且不可接受的解決方 –

可能這會爲你工作：

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

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

來源

2013-06-26 13:09:06 reyaner

我也寫了一個基於scrollTop的版本，但是在Internet Explorer和Chrome上，它很刺激。它滾動頁面，然後在原始位置滾動。它在Firefox上表現很好，但不是Chrome和IE。 –

你是對的，沒有在IE上測試它.. – reyaner

闖闖：

$("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/

來源

2013-06-26 14:14:25 reyaner

我不能用preventDefault，因爲它不會將事件分派給flash對象。你知道一種專門將滾動事件發送給該flash對象的方法嗎？使用preventDefault將切斷縮放功能。 –

我對這個問題幾個月前偶然發現（該我們用來管理滾動的舊方法在最接近的情況下不起作用nt瀏覽器）。我不允許發佈它的代碼，但這裏有一些關於我們如何做的說明。

像在reyaner的回答中，我們使用事件監聽和preventDefault（）來禁用瀏覽器自動滾動，並獲取滾動值（但沒有scrollTop（））。一旦我們有了價值，我們通過ExternalInterface將其發送到Flash。可能的話，flash對象必須預先add a Callback，這是一個可以被Javascript調用的Flash方法。

我們在Flash和JS之間增加了一些額外的交互，以便只有Flash具有焦點時才鎖定滾動。

警告：所有瀏覽器沒有相同的wheelDelta縮放比例，您可能會發現縮放速度可能會有所不同。爲了解決這個問題，我們決定每次調度事件時都要使用固定的步驟，而不是按原樣使用增量。

來源

2013-06-27 17:03:53 Aralicia

在頁面和Flash對象中同時進行HTML滾動

回答

相關問題