编辑:我忘了提,这只发生在 Chrome(最新版本)中。
这是设置:
<fancyboxOverlay>
<fancybox>
<ContainerDiv>
<MenuDiv>
<ScrollableContentDiv>
<ActualContentDiv>
每当 ActualContentDiv 比 ScrollableContentDiv 长时,后者将显示滚动条。整个框包含一个表单,该表单几乎只是关于通过按“下一步”按钮显示或隐藏 div(“页面”)。
这就是问题:
其中一页很长,最后有一个“下一步”按钮。按下时会显示下一页,但花式框也会向右和底部移动。不仅是fancybox,还有fancyboxOverlay。然后,覆盖的新左上角位于以前幻想框的左上角所在的位置。
此外,这种转变似乎只是视觉上的,但实际的内容元素(如按钮或输入字段)仍然位于它们应该只是现在它们“不可见”的相同位置。当我将鼠标悬停在应该是下一个按钮的区域上并且该按钮的视觉表示(现在被放置得很远)切换到它的悬停状态时,我发生了这种情况。
我不知道,如果你明白我的意思。视觉上所有内容都向右移动了一点,但我的鼠标光标向我显示它们就在它们应该在的位置。只有当内容太长时才会发生这种转变。
这很令人困惑。
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;
我不知道如何更好地解释这一点。我不能展示这个项目。那么有人可以帮我解决这个问题吗?