Question

I’m using the Jquery “ScrollTo” plugin: http://demos.flesler.com/jquery/scrollTo/ and it works fine, but I have a trouble with webkit browsers. When I drag on an input and move the cursor outside of the container element (wich have fixed size and overflow: hidden css attribute) it moves the scroll with an undesired behavior like this example:

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

I can fix this disabling mousedown event like this post: Disabling Drag Scroll for Text Inputs with JQuery with this code:

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

But I need to propagate de drag event for select the text inside the input (this fact is what trigger the error).

Also I tried applying -webkit-user-drag: none to inputs, but it doesn’t solve the problem.

I found similar posts but any solve this issue so that if I can allow text selection inside inputs and textareas I will be satisfied.

P.S. My english is not very good, I hope I have explained clearly. Thank you!

Answer 1

You can try it:

$("#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;
  }
});​

Here is your update jsFiddle working…

** edited due to @Jörn Berkefeld comment

Since chrome 27 (as Jörn said) the Chrome browser has stopped to trigger scroll event in input elements, so I need to change this event by mousedown and mouseup+blur to simulate the desired behavior;