mousedown 上的 Webkit 滚动条错误答案

【问题标题】：Webkit scrollbar bug on mousedownmousedown 上的 Webkit 滚动条错误
【发布时间】：2011-11-13 05:37:38
【问题描述】：

我在基于 webkit 的浏览器（Chrome 和 Safari）中遇到垂直滚动条的奇怪行为。我的示例中的垂直滚动条可以根据需要显示，并且在使用鼠标滚轮滚动时可以使用。

奇怪的是，点击滚动条是无法滚动的。

我设法将错误隔离到一个简单的 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
  });
});

在此处http://jsbin.com/uculem/8 提供了带有必要 html 的运行演示。尝试通过单击滚动条并四处移动滚动条来滚动。

当从 chrome 调试器获取由 jQueryUI 生成的完整 DOM 并将其粘贴到新的 html 文件时，一切都会再次运行。见这里：http://jsbin.com/ahitev/2

我很感激任何可能导致这种情况的提示。每种解决方法都值得赞赏。

谢谢，

弗洛里安

编辑

正如 tw16 所指出的，当 javascript 代码捕获 mousedown 事件时，这会发生在 webkit 浏览器中。这似乎是 webkit 中的一个错误：https://bugs.webkit.org/show_bug.cgi?id=19033

【问题讨论】：

标签： css dom webkit scroll

【解决方案1】：

这确实是一个错误。正如你在这里看到的：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 事件来防止滚动。

【讨论】：