javascript - 将焦点更改为溢出 :hidden contained element, 会移动它，但会导致这种差异不明显

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>

我需要这个位置，因为我正在开发一种滚动，并且滚动条应该根据元素移动。

P.S.:问题只是为了获取位置信息，因为我触发了 .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);
});

这是 fiddle :http://jsfiddle.net/NobleMushtak/M6CTe/1/