更新

Question

我目前正在使用灯箱样式叠加层来浏览本网站上的“阅读更多”内容：

但不幸的是，我在灯箱中的内容不会滚动，而是在后台滚动页面。

有人可以帮忙吗？

Answer 1

很难确认，但我想你需要在显示灯箱时禁用滚动。

特别需要：

$.scrollify.disable();

和

$.scrollify.enable();

更新

在您正在使用的版本中（我不知道是否还有其他版本，我以前从未使用过该库）disable（）方法存在错误：

$.scrollify.disable = function() {
    disable = true;
};

disable未定义。此变量名称需要更新为disabled。（在手动更改之前检查脚本的更新。）

要获得您想要的工作，您需要执行以下操作。我们以“阅读作业说明”按钮为例。您有以下代码用于显示和隐藏灯箱：

            // SERVICES 2 - OVERLAY - SHOW
            $( "#srvcs2" ).click(function() {
                $( "#services2-overlay" ).removeClass('animated fadeOutDown').css('left', '0').addClass('animated fadeInUp');
                $( "#services2-overlay .container" ).css('opacity', '0').addClass('animated fadeInUp');
            });

            // SERVICES 2 - OVERLAY - HIDE
            $( "#services2-overlay-close" ).click(function() {
                $( "#services2-overlay" ).removeClass('animated fadeInUp').addClass('animated fadeOutDown');
                $( "#services2-overlay .container" ).removeClass('animated fadeInUp');
            });

您需要在此处（以及所有其他处理程序）添加scrollify启用和禁用代码，如下所示：

            // SERVICES 2 - OVERLAY - SHOW
            $( "#srvcs2" ).click(function() {
                $.scrollify.disable();
                $( "#services2-overlay" ).removeClass('animated fadeOutDown').css('left', '0').addClass('animated fadeInUp');
                $( "#services2-overlay .container" ).css('opacity', '0').addClass('animated fadeInUp');
            });

            // SERVICES 2 - OVERLAY - HIDE
            $( "#services2-overlay-close" ).click(function() {
                $.scrollify.enable();
                $( "#services2-overlay" ).removeClass('animated fadeInUp').addClass('animated fadeOutDown');
                $( "#services2-overlay .container" ).removeClass('animated fadeInUp');
            });

请注意添加$.scrollify.disable();和$.scrollify.enable();

这将在灯箱打开时禁用滚动，并在关闭灯箱时再次启用它。

页面滚动而不是灯箱内容

1 个答案:

更新