Question

jsfiddle

<div id="container">
    <div><input type="text" /></div>
    <div><input type="text" /></div>
    <div><input type="text" /></div>
    <div><input type="text" /></div>
    <div><input type="text" /></div>
    <div><input type="text" /></div>
    <div><input type="text" /></div>
    <div><input type="text" /></div>
    <div><input type="text" /></div>
</div>

#container{
    height:50px;
    border:1px solid #000;
    overflow:hidden;                    
}

鉴于上面的例子，如果我点击第一个框并开始按Tab键，浏览器将自动滚动＆＃34;＆＃34;＆＃34;保持焦点元素在视野中。

为了实现这一目的，正在修改什么？这不是任何事情的立场。

我查看了Chrome开发工具中的所有计算样式，没有任何变化。

我还没有开始探索只能访问javascript的属性。我想我会问，看看是否还有其他人知道。

澄清

澄清任何混淆：我想知道浏览器移动了多远，它正在移动它以保持焦点输入元素的可见性。

？回答

所以输入的父元素的scrollTop似乎确实发生了变化。也许这就是我正在寻找的。

应该是一个单独的问题

你能告诉浏览器滚动哪个元素，或者它总是直接表格元素？

Answer 1

你想要scrollTop property。滚动“页面”时，浏览器在更新哪个元素的scrollTop属性方面有所不同。在Chrome和IE中，它是document.documentElement，在FireFox中是document.body。（就个人而言，document.body对我来说最有意义，但无论如何......）确定页面滚动位置的跨浏览器方式是：

var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;

但是，有时它不是滚动的页面。当你的内容不适合overflow:auto的元素（它溢出）时，你会得到该元素的滚动条。在这种情况下，您可以阅读该元素的scrollTop属性。

事实上，如果overflow不是visible，那么该元素是可滚动的 - 这样做有点棘手。您可以通过选择文本来滚动这些元素，或者，如您所发现的那样，通过使用键盘将焦点放在隐藏元素上。 scrollTop属性也会为您提供该元素的滚动位置。

滚动位置无法通过CSS配置。但是，您可以使用脚本对其进行修改。

关于你的“单独”问题，滚动的元素将是其内容溢出其边界的最近的祖先元素。您可以使用JavaScript覆盖该行为。

当你有嵌套的可滚动元素时，它会变得更有趣。当你混合一些嵌套的可滚动容器时，看看你的jsFiddle会发生什么：jsfiddle.net/f2p96/3

HTML输入Tabing超出可见区域修改了什么？

澄清

？回答

应该是一个单独的问题

1 个答案: