Question

我正在使用Jquery“ScrollTo”插件：http://demos.flesler.com/jquery/scrollTo/并且它工作正常，但我在使用webkit浏览器时遇到了麻烦。当我拖动一个输入并将光标移动到容器元素之外时（它具有固定的大小和overflow：hidden css属性），它会以不希望的行为移动滚动，如下例所示：

http://jsfiddle.net/H6PaC/53/

我可以使用此代码修复此禁用mousedown事件，例如此帖子：Disabling Drag Scroll for Text Inputs with JQuery：

$("input").mousedown(function(event){
    $(event.target).focus();
    event.preventDefault();
});

但我需要传播de drag事件以选择输入内的文本（这个事实是触发错误的原因）。

此外，我尝试将-webkit-user-drag：none应用于输入，但它无法解决问题。

我找到了类似的帖子，但任何解决了这个问题，这样如果我可以在输入和textareas中选择文本，我会很满意。

P.S。我的英语不是很好，我希望我已经解释清楚了。谢谢！

Answer 1

你可以尝试一下：

$("#scroll_link").click(function(){
  //disable guilty trigger, force scroll in viewport works
  window.guilty_trigger = false;
  $("div.viewport").scrollTo($("input.goal"),800);
});

$(".guilty").on('mousedown', function(e){
    window.guilty_trigger = true;
}).on('mouseup blur', function(e){
    window.guilty_trigger = false;
});

$(".viewport").on('scroll', function(e){
  //if guilty_trigger is true, viewport should keep your position
  if ( window.guilty_trigger ) {
    $("div.viewport").scrollTo($("input.guilty"));
    return false;
  }
});

这是您的更新jsFiddle工作...

** 由于@JörnBerkefeld发表评论

由于Chrome 27（正如Jörn所说），Chrome浏览器已停止触发输入元素中的滚动事件，因此我需要通过mousedown和mouseup + blur更改此事件以模拟所需的行为;

Answer 2

Bare-bones解决方案：

$('.container').on('mousedown', 'input', function(e){
    $(e.target).focus();
    e.preventDefault();
});

Fiddle here.

这可以防止滚动 - 以及正确的文本选择。更多内容;）

Answer 3

似乎是Webkit bug跟踪器上的一个bug。

https://bugs.webkit.org/show_bug.cgi?id=114384

需要更多人确认。

我不认为防止鼠标事件是最好的主意。我能够成功阻止这种情况发生的唯一方法是向左滚动并在滚动事件上滚动顶部。虽然屏幕重绘时有轻微的抖动，但我认为这更令人满意，然后在输入字段上禁用鼠标事件。

$('body').on('scroll', '.ofhidden', function(e) {
    var $el = $(e.currentTarget);
    $el.scrollLeft(0);
    $el.scrollTop(0);
});

在webkit浏览器上拖动输入时不需要的滚动

3 个答案: