Question

修改：我忘了提及，这只发生在Chrome（最新版本）中。

这是设置：

<fancyboxOverlay>
    <fancybox>
        <ContainerDiv>
            <MenuDiv>
            <ScrollableContentDiv>
                <ActualContentDiv>

每当ActualContentDiv比ScrollableContentDiv更长时，后者将显示滚动条。整个框中包含一个表格，几乎只有div（“Pages”）通过按下“下一步”按钮显示或隐藏。

这是问题所在：

其中一个页面很长，最后有一个“下一个”按钮。按下时会显示下一页，但fancybox也会向右移动到底部。而且不仅仅是fancybox而且还有fancyboxOverlay。然后，叠加层的新左上角位于fancybox左上角的位置。

此外，似乎这种转变只是视觉效果，但实际的内容元素，如按钮或输入字段仍然处于相同的位置，它们应该只是现在它们“不可见”。当我在一个下一个按钮所在的区域上空盘旋并且该按钮的视觉表示（现在被远离）切换到它的悬停状态时，这发生在我身上。

我不知道，如果你明白我的意思。视觉上所有内容都向右移动，有点向下移动，但我的鼠标光标向我显示它们应该在正确的位置。只有当内容很长时才会发生转变。

令人困惑。

fancybox调用是：

$("a.various").fancybox({
    fitToView: false,
    autoSize: true,
    //width: 710,
    //height: 700,
    closeClick: false,
    autoCenter: false,
    scrolling: 'auto',
    helpers: {
        overlay: { closeClick: false }
    }

溢出样式如下：

ContainerDiv: no overflow styles
MenuDiv: no overflow styles
ScrollableContentDiv: overflow-y: auto; overflow-x: hidden;
ActualContentDiv: overflow-x: visible; overflow-y: visible;

我不知道如何更好地解释这一点。我没有能够展示这个项目。所以有人可以帮我这个吗？

Answer 1

任何演示都有助于了解您的问题。我试图重新创建，但对我来说很好。也许禁用next / prev动画会有所帮助 -

$("a.various").fancybox({
    nextEffect        : 'none',
    prevEffect        : 'none'
});

请参阅操作 - http://jsfiddle.net/qwHW7/

Fancybox 2.1.3 - 当可滚动内容变长时，Box会移开

1 个答案: