在 webkit 浏览器上拖动输入时出现不希望的滚动答案

【问题标题】：Undesired scroll when drag inputs on webkit browsers在 webkit 浏览器上拖动输入时出现不希望的滚动
【发布时间】：2013-07-14 11:00:26
【问题描述】：

我正在使用 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 应用于输入，但这并不能解决问题。

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

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

【问题讨论】：

你指的是出现在页面上还是特定元素上的滚动条？
问题出在特定元素上。 scrollTo 插件在 div 上单击链接并隐藏滚动条进行动画滚动。如果您将输入拖放到 div 内，它会滚动到不需要的位置。
您是否使用 jQuery UI 来实现拖放功能？
不，拖放不是 gui 的一部分，但是，如果您想在输入中选择文本并离开框的限制，容器会滚动到中间位置，隐藏表单的一部分.
对不起，我还是不明白，你能给我举个例子来说明你的意思吗？或者在 jsfiddle 上贴一些代码？

标签： jquery webkit scrollto

【解决方案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 更改此事件以模拟所需的行为；

【讨论】：

太棒了！我痴迷于试图在单击后停止拖动事件的传播，而我没有想到滚动事件。非常感谢！也感谢@MatthewRiches 的关注。

【解决方案2】：

简单的解决方案：

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

Fiddle here.

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

【讨论】：

你知道有没有 CSS 方法可以做到这一点？
@MatthewRiches 到目前为止，还没有办法停止传播或取消 CSS 中的事件冒泡。
这是我的第一个解决方案，但 Rafael 的代码很棒；)

【解决方案3】：

似乎是作为 Webkit 错误跟踪器上的错误提出的。

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

【讨论】：