웹 키트 브라우저에서 입력을 드래그 할 때 원하지 않는 스크롤

Question

http://demos.flesler.com/jquery/scrollTo/ Jquery "ScrollTo"플러그인을 사용하고 있는데 제대로 작동하지만 웹킷 브라우저에 문제가 있습니다. I는 입력 드래그 용기 요소의 외부에 커서를 이동할 때 (느릅 크기와 오버플 고정 가지고 CSS 속성 숨겨져)

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

I 수는 본 실시 예와 같은 바람직하지 않은 행동으로 스크롤 이동 이 코드 Disabling Drag Scroll for Text Inputs with JQuery를이 소식 등이 불가능 mousedown 이벤트를 해결

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

하지만 입력 내부의 텍스트를 선택하기위한 (이 사실은 오류를 트리거 것입니다) 드 끌기 이벤트를 전파해야합니다.

또한 입력에 -webkit-user-drag : none을 적용 해 보았지만 문제가 해결되지 않았습니다.

유사한 게시물을 찾았지만이 문제를 해결하여 입력 및 텍스트 영역에서 텍스트를 선택할 수 있도록하면 만족할 것입니다.

P. 제 영어 실력이별로 좋지 않습니다. 나는 분명히 설명하기를 희망합니다. 고맙습니다!

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입니다 ...

** 때문에 @ 요른 Berkefeld 주석

로 인해 편집 chrome 27 (Jörn이 말했듯이) Chrome 브라우저는 입력 요소에서 스크롤 이벤트를 트리거하기 위해 멈추었으므로 원하는 동작을 시뮬레이트하기 위해 mousedown 및 mouseup + blur로이 이벤트를 변경해야합니다.

Answer 2

베어 본 솔루션 :

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

Fiddle here.

이 방지 스크롤 -뿐만 아니라 적절한 텍스트 선택. 더 많은 와서)

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