Question

我有一份类似的文件。

当一些websocket活动发生时，输入字段（id = bar，由overflow:hidden隐藏）最终由我的代码聚焦，它将我的整个父元素移位，因此其他任何控件都不可见。 在底部运行小提琴作为示例。

HTML：

<div class="outer">
  <div class="parent">
    <div class="child" style="left: 10px; top: 10px; background:red;">Test1</div>
    <div class="child" style="left: 10px; top: 52px">Test2<div>
    <input class="child" id="bar" style="left: 30px; top: 10px">Test3</div>
  </div>
</div>

CSS：

.outer {
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.parent {
    position: relative;
}

.child {
    position: absolute;
}

JS：

setTimeout(function() {
    document.getElementById('bar').focus();
}, 2000);

注意：我将超时的延迟设置为低。您可能需要刷新页面才能看到它。

小提琴： http://jsfiddle.net/qa28q48o/2/

如何在CSS级别上防止这种情况发生，而不使用元素上的任何javascript hack来重置其滚动。

Answer 1

容器滚动到聚焦元素，尽管它溢出：隐藏。所以你的结果是没有滚动条只能看到你的内容的一小部分......

可能的解决方案： 1.溢出：可见或溢出：在外面滚动 2.外部尺寸更大

只是给它一点自由，外在的差......

Answer 2

我偶然发现了这个问题，在我弄清楚发生了什么之前花了一段时间：）

无论如何，我通过在触发对话的链接上执行.blur()来解决它，就在打开对话框之前。

if (link.hasClass('confirm')) {
    link.blur(); 
    $('#dialog-confirm').dialog({
        ...

当一个人获得焦点时，CSS会移动绝对孩子的父母

2 个答案: