mousedown上的Webkit滾動條錯誤

我在基於webkit的瀏覽器（Chrome和Safari）中遇到了垂直滾動條的奇怪行爲。我的示例中的垂直滾動條可根據需要顯示，並且在使用鼠標滾輪進行滾動時可以使用。mousedown上的Webkit滾動條錯誤

奇怪的是，通過單擊滾動條來滾動是不可能的。

我設法將錯誤隔離爲簡單的jQueryUI示例。

$(function() { 
    var $el = $('<div><div class="huge" style="height:2000px">Webkit can\'t scroll.</div></div>'); 
    $el.dialog({ 
    modal: true, 
    title: 'Webkit Scrollbar', 
    width: 500 
    }); 
});

帶有必要html的運行演示可在此處獲得http://jsbin.com/uculem/8。嘗試通過單擊滾動條並移動欄來滾動。

當從chrome調試器中獲取由jQueryUI生成的完整DOM並將其粘貼到新的html文件時，所有工作都會重新開始。看到這裏：http://jsbin.com/ahitev/2

我很感激任何暗示可能會導致這種情況。每個解決方法都是值得讚賞的。

謝謝，

弗洛裏安

編輯

正如tw16指出當鼠標按下事件由JavaScript代碼捕獲這發生在WebKit瀏覽器。這似乎是一個webkit的bug：https://bugs.webkit.org/show_bug.cgi?id=19033

來源

2011-09-08 Florian Gutmann

這確實是一個錯誤。正如你在這裏看到的：http://bugs.jqueryui.com/ticket/4671

在這個question，下面的代碼被建議作爲答案。

$el.dialog({ 
    open: function(event, ui) { 
     window.setTimeout(function() { 
      jQuery(document).unbind('mousedown.dialog-overlay') 
          .unbind('mouseup.dialog-overlay'); 
     }, 100); 
    }, 
    modal: true, 
    title: 'Webkit Scrollbar', 
    width: 500 
});

顯然jQueryUI通過捕獲mouseup/mousedown事件來防止滾動。

來源

2011-09-08 19:49:19 tw16

mousedown上的Webkit滾動條錯誤

回答

相關問題