Question

I have a containing div without a vertical scrollbar and an input that is partially visible. When I focus this input the containing div is moved upwards which makes my header disappear partially.

The scenario can be reproduced with the following jsfiddle example.

http://jsfiddle.net/3gqP9/6/

Is there a solution that keeps the input partially hidden?

Answer 1

Sure. I don’t know why you’d want focus on a partially hidden field, but still – adding to the code from your fiddle:

$('#btn').on('click', function(){
   $('#inputField').focus();
   $("#scrollable").scrollTop(0);
});

Demo: http://jsfiddle.net/3gqP9/8/

Or you can use .scrollTop() (no parameter) to retrieve the scroll position before setting focus and restore it to that same position after calling .focus().