当在弹出窗口内滚动时，如何在fancybox弹出窗口中修复图像？

Question

我有一个带有fancybox弹出窗口的图库。在Fancybox Popup中，我想在左侧显示图片，在右侧显示一些文本。如果文本太长，那么您应该能够向下滚动。在这种情况下，左侧的图像应固定在fancybox的左上角，只有文本才能滚动。

我尝试使用position:fixed和background-position:fixed的版本。但是，由于固定属性始终是从视口计算的，因此图像的某些部分隐藏在fancybox之外。 Fancybox版本：2.1.4 这是我的网站： http://tinyurl.com/bl7do5e

如何修复左侧中的图像 fancybox弹出窗口？

Answer 1

图像的CSS应将位置设置为相对，但相对标记指的是其上方div的位置状态。它应该适用于这些图像，但如果您在调试时遇到问题，请在将来查找。

.sticker {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

对于滚动文本框，您可以使用

div.item-page-contents {
    min-width: 100px;
    overflow: scroll;
}

这将为您提供滚动条，但您需要弄乱包含文本的div的大小以使其适合。此外，如果您希望滚动条消失，您可以将文本框div包装在另一个较小的div内，其中包含overflow：hidden以使它们在保留滚轮时消失。

渲染很酷这是你的工作吗？

编辑：花哨的盒子有一个内联css规则，如果盒子里的东西太大，它会使整个盒子（包括图片）滚动，但只要你仔细考虑如何适应元素你不会有这个问题。 Joomla或花哨的盒子插件也可能有一种方法来禁用它。我之前从未使用过它，所以我不确定。

div.item-page-contents {
    width: 275px;
    float: right;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}