Trying to add a class if another already exists
Question
This is a multi layered issue, not sure if it'll fly if I ask it all, but the issue I'm having is Lightbox related.
I am trying to get it working, when I click on an image, the img lightboxes open, but even with 'disableScrolling': true, it doesn't work. body does get overflow: hidden; from that lightbox option, but the page still scrolls.
So, I've got to figure out a hacky fix. I tried this js but it's not working:
$( ".smile-thumb-container" ).click(function() {
if($('body').hasClass('lb-disable-scrolling')) {
$('html').addClass('lb-overflow-fix');
} else {
$('html').removeClass('lb-overflow-fix');
}
});
I'm basically trying to say when I click on an img , body gets .lb-disable-scrolling . This is from Lightbox itself, now, I want to say when I click on the div that holds the img to check if <body> has .lb-disable-scrolling , which it'll have because lightbox does this. If body has that class, add a class to <html> called .lb-overflow-fix . When I close the img, <body> loses .lb-disable-scrolling so html should remove .lb-overflow-fix too.
.lb-overflow-fix in my css is overflow: hidden; I'm not sure why it works on <html> and not <body> .
I know actual sites aren't ideal, but I can't even get it working in a fiddle properly, so I have to assume my js is incorrect. This is the site the issue is on.
1 answers
solution1
0 2018-03-03 11:08:49
Because you set this CSS:
html {
overflow-x: hidden;
}
This changes how vertical scrolling is handled by default, and the result is that it's your <html> node that handles it, rather than the <body> node.
Remove that overflow-x: hidden; from the <html> , and suddenly your site works as intended.
It is a bad idea to hide horizontal overflow anyway, so I'd recommend not trying to.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.