0

对于一个新项目，我需要制作一个 scroable 灯箱，就像点击 pinterest 上的任何图像后打开的灯箱一样。要求是：

  1. 灯箱必须支持 HTML 内容。
  2. 内容可能比显示器屏幕更多（固定宽度但没有高度限制）。
  3. 灯箱不应有其独立的滚动条，但必须使用浏览器的滚动条，如 pinterest。
  4. 当灯箱打开时，滚动事件应该只滚动灯箱而不是背景。
  5. 只有纯 Javascript 和/或 JQuery 和/或 HTML5/CSS3 解决方案是可接受的。

我经历了很多灯箱 JS 甚至是 JQuery 插件。似乎大多数支持单屏灯箱。

是否有人知道任何可用的 JS/JQuery 插件来实现上述要求。如果没有，是否有任何教程可以帮助制作自定义插件来实现上述要求。

提前致谢，

卡皮尔。

4

2 回答 2

1

您正在查看的内容只能通过 HTML/CSS 实现。只需使用任何 Javascript 库即可轻松使用，而 JS/JS Lib 取决于个人喜好。

在主要逻辑方面，在 pintrest 中，滚动功能是通过 CSS 属性 'overflow-y:scroll' 实现的。对于叠加层（灯箱背景），没有定义宽度/高度，但 CSS 属性（顶部：0；底部：0；左侧：0；右侧：0；）会发挥作用。

有了上面的 CSS 属性（显然很少有其他的设计），灯箱的滚动功能就会出现。但是，您会注意到两个垂直滚动条；一个用于机身，另一个用于灯箱。这里的诀窍是让正文滚动条消失。这可以通过在灯箱打开时将 CSS 属性 ('overflow: hidden') 赋予 body 并在灯箱关闭时将其删除来完成，这可以通过 JS/JS-lib 轻松完成。因此，我们将有两个滚动条，但一次只显示一个会获得所需的效果。

希望这可以帮助。

于 2012-08-09T03:40:46.247 回答
0

使用 fancybox（与 jQuery 一起）： http: //www.fancyapps.com/fancybox/

var options = {/* options*/};
$(".links").fancybox(options);

如果您有一个指向 html 内容的链接，如下所示：

<a href='#inline' class='links'>Open fancybox</a>

它将打开带有#inline 内容的fancybox，例如：

<div id='inlines' style='display: none'>
My brilliant fancybox content.
</div>

它使用标准滚动条，如果你把它做得足够大，其他内容就无法滚动。

于 2012-08-07T13:19:38.583 回答