Question

我在基于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

Answer 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事件来阻止滚动。

mousedown上的Webkit滚动条错误

1 个答案: