Question

在SharePoint的上下文中，我调用了一个对话框。 SharePoint基本上创建了一个灯箱div并将我的html放入其中。我无法控制它决定显示对话框的位置，也无法控制其尺寸，甚至也无法控制用于包含页面的CSS。换句话说，无论我能做什么都必须包含在我自己的html / javascript / CSS中。

问题到了，因为我的html有时会包含这个div 对话太高了，我当然希望有一个垂直滚动条。因此，我使用CSS样式“overflow：auto”定义它。

但是我得到的是整个对话框上的滚动条，而div完全包含在没有滚动条的对话框中。

我已经跟踪了DOM，我相信问题的根源是包含我的对话框的灯箱div也定义为“overflow：auto”。显然，这优先于内部div，因此垂直滚动条放在包含div上，而不是放在我的内部div上。

我正在寻找一种方法将滚动条从对话框移动到内部div。请记住，我无法更改CSS以摆脱包含我的html的灯箱div中的“overflow：auto”。

我可以通过将内部div的高度设置为绝对像素值来解决问题，但是因为我无法预先为对话框的其他元素或对话框本身分配多少屏幕空间，视觉结果可能相当难看。

有什么想法吗？

以下是问题布局的简单示例：

<div style="overflow:auto"> <!-- lightbox div -->

<!-- start of my html -->
<div style="overflow:auto !important">
<!-- high div -->
</div>
<div>
<button></button>
<button></button>
</div>
<!-- end of my html -->

</div> <!-- end of lightbox div -->

我还应该提一下，我正在使用Internet Explorer 9。

Answer 1

SharePoint有一个很有趣的方法来计算我在对话框中使用它提供的html的高度。它可能在从页面分离时计算它，因此CSS定位无法工作。因此，任何尝试使用聪明的CSS模式（例如Alexey Ivanov的proposed）都会失败，因为SP错误地将html计算为极短。最好的解决方案就是这样，SP不会提供一个CSS大小的框架来定位元素。

所以我们留下了一个javascript解决方案。由于我的html未插入iframe的最顶层，因此我无法访问任何正文事件。然后唯一的解决方案是使用img元素的onload事件，作为唯一可用的可挂钩事件，作为Ann的counseled。不幸的是，必须成功加载真实图像才能触发此事件，因此必要时一个人可以添加一个最小的1×1像素图像，甚至可以通过“display：none”样式将其取出。

onload事件包含将计算对话框大小的javascript命令，减去除了我们可能太高的div之外的所有元素的总大小，并将此div的高度设置为计算的差异。

由于DOM-traversal在Internet Explorer中相当破碎，因此jQuery可以通过解决bug来“修复”它。如果jQuery不可用，可以使用强臂方法，例如在document.getElementsByTagName('div')上循环以找到感兴趣的div。

包含提供的html的SP div可以通过其className标识：

ms-dlgContent ：对话框本身
ms-dlgFrameContainer ：包含我们的html作为innerHTML的内部div，其样式为“overflow：auto”，与我们自己的相冲突。

对于后者，我还没有设法找到任何覆盖其“overflow：auto”风格的方法。我最终决定通过将其设置为null来删除它的className。没有太大的损失，因为它包含的唯一风格是同样麻烦的“溢出：自动”。

总而言之，相当多的工作，包括心理和编程，只是因为SP程序员缺乏足够的想象力来考虑CSS定位。

Answer 2

这个怎么样？如果你的内部div中有一个图像，它将有一个jQuery“load”事件。由于图像在加载时往往落后于文档的其余部分，因此在完整的DOM完成之后，可能才会触发。你可以附加一个处理程序。

或者，如果你可以在屏幕上停留一两秒的滚动条，你可以在你的div中使用一个计时器并激活一个方法来改变外部div的样式，经过足够的时间后，一切都被加载和设置

Answer 3

首先，我做了这个假设：

SharePoint灯箱执行以下操作之一：
- 设定宽度和高度。
- OR 它的位置是：绝对/相对。
- OR 它会在iframe中加载内容。
不在内部溢出块（即按钮）内的内容具有固定的高度。

如果这个假设是有效的，那么你可能可以通过位置内部div div与“position：absolute”，并输入left，right，top和bottom坐标来实现描述的效果。

示例：http://jsfiddle.net/GxDcW/

Answer 4

您无法使用css或HTML从灯箱div中删除overflow: auto，但您可以使用javascript。你不需要jquery或Mootools，内联javascript的片段应该没问题

<script type="text/javascript">
    var lightbox = document.body.getElementsByTagName("div")[0];
    ligthbox.style.overflow = "visible";
</script>

这假设灯箱div是页面上的第一个div。如果不是，您可以使用id使用getElementById或首先定位某个包装div来定位它。使用css或html的任何其他解决方案很可能涉及使其（过度）复杂且容易出错。

如何在内部div上有滚动条，而不是在对话框上

4 个答案: