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

Question

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

我尝试了带有 position:fixed 和 background-position:fixed 的版本。然而，由于固定属性总是从视口(viewport)计算，图像的某些部分隐藏在 fancybox 之外。花式盒版本:2.1.4这是我的网站: http://tinyurl.com/bl7do5e

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

Answer 1

图片的CSS应该把position设置为relative，但是relative标签指的是它上面的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;
}