Изменение фокуса на переполнение: скрытый элемент, перемещает его, но делает эту разницу незаметной

Question

У меня есть контейнер с переполнением: скрыто. Внутри есть таблица с некоторыми данными. Когда вы меняете фокус с ввода на ввод, элемент таблицы перемещается, чтобы сделать элемент видимым, но нет никаких следов этого изменения (по крайней мере, я его не вижу), чтобы зафиксировать, насколько он был перемещен.

<style>
.container{
    overflow: hidden;
    width: 300px;
    height: 30px;
}
</style>
<div class="container">
    <table>
        <tbody>
            <tr>
                <td><input type="text" placeholder="input1"></td>
                <td><input type="text" placeholder="input2"></td>
                <td><input type="text" placeholder="input3"></td>
                <td><input type="text" placeholder="input4"></td>
                <td><input type="text" placeholder="input5"></td>
                <td><input type="text" placeholder="input6"></td>
                <td><input type="text" placeholder="input7"></td>
                <td><input type="text" placeholder="input8"></td>
                <td><input type="text" placeholder="input9"></td>
                <td><input type="text" placeholder="input10"></td>
            </tr>
        </tbody>
    </table>
</div>

Мне нужна эта позиция, потому что я разрабатываю вид прокрутки, и полоса прокрутки должна двигаться соответственно элементу.

PS: проблема только в том, чтобы получить информацию о положении, потому что я запускаю событие.focusin(), но нет ничего для извлечения

Спасибо!!!

Answer 1

Я бы сделал что-то вроде этого:

var inputs /*All of the inputs*/, visibleInputs /*All of the visible inputs*/,

disable = function() {
    /*Shows/Hides the inputs*/
}, whenFocusin = function() {
    /*Scrolls the inputs*/
}, update = function() {
    /*Updates visibleInputs and binds whenFocusin to the "focusin" event*/
};

//When the document is ready:
$(document).ready(function() {
    //We set inputs...
    inputs = $(".container").children();
    //...call update() ...
    update();
    //...and call disable().
    inputs.each(disable);
});

Вот скрипка: http://jsfiddle.net/NobleMushtak/M6CTe/1/