如果另一个已经存在,则尝试添加一个类

问题描述 投票:0回答:1

这是一个多层次的问题,不确定如果我问这一切它是否会飞,但我遇到的问题是与Lightbox有关。

我试图让它工作,当我点击一个图像,img灯箱打开,但即使使用'disableScrolling': true,它也无法正常工作。 body确实从该灯箱选项获得overflow: hidden;,但页面仍然滚动。

所以,我必须找出一个hacky修复。我试过这个js但是它不起作用:

$( ".smile-thumb-container" ).click(function() {
    if($('body').hasClass('lb-disable-scrolling')) {
        $('html').addClass('lb-overflow-fix');
    } else {
        $('html').removeClass('lb-overflow-fix');
    }
});

我基本上试图说当我点击img时,身体得到.lb-disable-scrolling。这是来自Lightbox本身,现在,我想说当我点击持有divimg来检查<body>是否有.lb-disable-scrolling,因为灯箱会这样做。如果body有该类,则向<html>添加一个名为.lb-overflow-fix的类。当我关闭img时,<body>失去.lb-disable-scrolling所以html也应该删除.lb-overflow-fix

.lb-overflow-fix在我的CSS中是overflow: hidden;我不知道为什么它适用于<html>而不是<body>

我知道实际的网站并不理想,但我甚至无法正确地使用它,所以我必须假设我的js是不正确的。这是问题所在的site

javascript jquery css lightbox
1个回答
0
投票

因为你设置了这个CSS:

html {
    overflow-x: hidden;
}

这会改变默认情况下垂直滚动的处理方式,结果是它是处理它的<html>节点,而不是<body>节点。

overflow-x: hidden;删除<html>,突然你的网站按预期工作。

无论如何隐藏水平溢出是个坏主意,所以我建议不要尝试。

© www.soinside.com 2019 - 2024. All rights reserved.