由于滚动条和滚动页面，ColorBox 定位不正确答案

【问题标题】：ColorBox positioned incorrectly due to scroll bar and scrolled page由于滚动条和滚动页面，ColorBox 定位不正确
【发布时间】：2012-11-27 10:35:13
【问题描述】：

当滚动条在右侧可见时，页面内容会发生变化，但颜色框不会。

尝试使用 html {overflow-y: scroll;} 解决此问题，但这似乎不起作用。页面内容已正确修复，但 ColorBox 不考虑滚动条宽度。

如果滚动条可见，并且在单击链接时页面向下滚动，则 ColorBox 会在错误的位置初始化，从可见页面顶部而不是实际页面顶部对齐。

编辑：

在第 492 行，有以下代码 // remove the modal so that it doesn't influence the document width/height $box.css({top: -9e4, left: -9e4});

我似乎模态影响了文档的宽度/高度，因为注释掉第 503 行会产生预期的效果//top = scrollTop;。这告诉我模态框引起了问题。这仍然不能纠正水平对齐的行为，弹出窗口仍然从主体偏移，因为它没有考虑滚动条。

有什么想法吗？

【问题讨论】：

这是依赖于浏览器的行为吗？无法在 IE 9 和 Firefox 14 中重现。
这种行为适用于 FF v16.0.2、Safari v5.0.5 和 IE v9.0.8。我猜这是一个CSS问题。请注意，如果您调整浏览器窗口的大小以使右侧出现滚动条，请在单击链接之前向下滚动页面，您应该能够重现我所看到的内容。

【解决方案1】：

这是 ColorBox 的默认行为。要处理它，您需要将 ColorBox 初始化更改为（sn-p 取自您的页面）：

.colorbox({iframe:true, width:"800px", height:"600px", top:"137px", opacity:"0", scrolling:"false", position:fixed});

注意position:fixed 属性 - 它会强制浏览器按照您的要求处理您的top 参数，即它将始终为137px，而不是137px + 页面的滚动高度。

也请将此question 视为与您的相似。

【讨论】：

这实际上与我希望实现的行为相反。我的意图是让弹出窗口完全打开包含链接的框。使用fixed:true 参数，弹出窗口不会随页面滚动，它在浏览器中保持固定。只要页面没有滚动条在运行，我正在使用的调用就可以工作。我能看到的唯一解决方法是将页面设置为overflow: hidden，我不想这样做。