2

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

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

我可以像这篇文章一样修复这个禁用 mousedown 事件：Disabling Drag Scroll for Text Inputs with JQuery with this code：

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

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

我还尝试将 -webkit-user-drag: none 应用于输入，但这并不能解决问题。

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

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

4

3 回答 3

2

你可以试试看：

$("#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 更改此事件以模拟所需的行为；

于 2012-06-12T18:38:41.087 回答
1

简单的解决方案：

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

在这里拉小提琴。

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

于 2012-06-12T15:11:08.397 回答
1

似乎是作为 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);
});
于 2013-07-14T03:00:26.417 回答