javascript - Changing focus over an overflow:hidden contained element, moves it but makes unnoticeable that difference

Question

I have a container with overflow:hidden. Inside it, there is a table with some input within. When you change the focus from input to input, the table element moves to make visible the element, but there is no trace of that change (at least I can't see it) to capture how much it have been moved.

<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>

I need that position because I'm developing a kind of scroll, and the scroll bar should move accordingly to the element.

P.S.: The problem is just to get the position info, cause I trigger .focusin() event but there is nothing to retrieve

Thanks!!!

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/