jquery - fancybox 滑动运动故障/生涩

Question

这是网站 --> http://giantsofafrica.org/camps/top-50-camp/

每当我在这个网站上使用 fancybox 时，都会出现这种奇怪的、不稳定的、滑动的 Action 。如果向下滚动并单击其中一名玩家，将出现弹出窗口。单击向右或向左箭头，您就会明白我的意思。滑动不顺畅。

这是效果的动画 GIF --> http://www.screencast.com/t/KDLvaXIgM

我查看了 CSS 是否有任何异常，但没有发现任何异常。坦率地说，我发现调试起来真的很尴尬。如果有人在回答中解释了他们如何调试它，那就太好了。

谢谢。

Answer 1

Fancybox 根据 API 设置和内容尺寸动态计算 .fancybox-wrap 容器的位置和边距，例如，可能会产生如下结果:

element.style {
  height: auto;
  left: 279px;
  opacity: 1;
  overflow: visible;
  position: absolute;
  top: 28px;
  width: 808px;
}

...但是，您的 screen.css 中有这些 css 规则(第 1768 和 2381 行)文件:

.fancybox-opened {
  top: 10px !important;
}

...所以 fancybox 包装器从原来的 top: 28px; (如上)跳到 top: 10px; 之后显示。

注意 fancybox 主包装器有两个类:.fancybox-wrap 和 .fancybox-opened

It would be great if someone, with their answer, explained how they were able to debug this.

使用 Firebug 跟踪继承的 css 样式和 fancybox 元素的布局。无论如何，在通过 css 修改插件的选择器时一定要小心，以避免意外的结果。