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

Question

我正在使用 Jquery“ScrollTo”插件:http://demos.flesler.com/jquery/scrollTo/它工作正常，但我在使用 webkit 浏览器时遇到了麻烦。当我拖动输入并将光标移动到容器元素之外(具有固定大小和溢出:隐藏的 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 应用于输入，但它不能解决问题。

我发现了类似的帖子，但任何解决了这个问题，这样如果我可以允许在输入和文本区域内选择文本，我就会感到满意。

附注我的英语不是很好，希望我已经解释清楚了。谢谢!

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örn Berkefeld 评论而编辑

自 chrome 27(如 Jörn 所说)以来，Chrome 浏览器已停止触发输入元素中的滚动事件，因此我需要通过 mousedown 和 mouseup+blur 来更改此事件以模拟所需的行为；