鼠标按下时的 Webkit 滚动条错误

发布于 2024-12-03 18:45:00 字数 998 浏览 0 评论 0原文

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

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

当从 chrome 调试器获取 jQueryUI 生成的完整 DOM 并将其粘贴到新的 html 文件时，一切都会恢复正常。请参阅此处： http://jsbin.com/ahitev/2

我很感激任何提示造成这个。每个解决方法都受到赞赏。

谢谢，

Florian

编辑

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

原文

I experience strange behaviour with vertical scrollbars in webkit based browsers (Chrome and Safari). The vertical scrollbar in my example is visible as desired and works when scrolling with the mouse-wheel.

The strange thing is that it's impossible to scroll by clicking the scrollbar.

I managed to isolate the error to a simple jQueryUI example.

$(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
  });
});

A running demo with the necessary html is available here http://jsbin.com/uculem/8. Try scrolling by clicking the scrollbar and moving the bar around.

When taking the complete DOM produced by jQueryUI from the chrome debugger and pasting it to a new html file everything works again. See here: http://jsbin.com/ahitev/2

I'm grateful for any hint what could cause this. Every workaround is appreciated.

Thanks,

Florian

Edit

As tw16 pointed out this occurs in webkit browsers when the mousedown event is captured by javascript code. This seems to be a bug in webkit: https://bugs.webkit.org/show_bug.cgi?id=19033

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少女净妖师 2024-12-10 18:45:00

这确实是一个错误。这里看到的：http://bugs.jqueryui.com/ticket/4671

正如您在这个问题，建议使用下面的代码作为答案。

$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 事件来防止滚动。

This is indeed a bug. As you can see here: http://bugs.jqueryui.com/ticket/4671

In this question, the code below was suggested as an answer.

$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
});

Apparently jQueryUI prevents scrolling by capturing the mouseup / mousedown events.

回复收藏 0 原文

~没有更多了~