这是一个多层次的问题,不确定如果我问这一切它是否会飞,但我遇到的问题是与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本身,现在,我想说当我点击持有div
的img
来检查<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。
因为你设置了这个CSS:
html {
overflow-x: hidden;
}
这会改变默认情况下垂直滚动的处理方式,结果是它是处理它的<html>
节点,而不是<body>
节点。
从overflow-x: hidden;
删除<html>
,突然你的网站按预期工作。
无论如何隐藏水平溢出是个坏主意,所以我建议不要尝试。