No scroll whilst lightbox is open – Joe Bailey Photography

I read the following article by CSS Tricks https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/ and decided that my website shouldn’t scroll whilst the lightbox is shown, i.e. on the Blog and the Memories pages when an image is clicked.

I use the Featherlight plugin on my Blog and the equivalent for the Memories page.

I added the following CSS to my Blog, which now means that the page will not scroll whilst the lightbox is open, but sticky elements like the navbar and the sidebar will stay in place. Similar code was added across the rest of the site.

 1html {
 2	position: relative!important;
 3	overflow-x: hidden;
 4}
 5html.with-featherlight {
 6	overflow-y: hidden;
 7	width: 100%;
 8}
 9html.with-featherlight body {
10	overflow-y: scroll;
11}
12html.with-featherlight nav.featherlight-fix {
13	position: fixed;
14	margin-top: 0;
15	left: 0;
16}
17html.with-featherlight #sidebar.featherlight-fix ul:first-child {
18	position: fixed;
19}
20html.with-featherlight .cc-window.cc-banner.cc-type-info.cc-theme-edgeless.cc-bottom.cc-color-override--591744288 {
21	width: calc(100% - 17px);
22}
23@media (max-width: 830px) {
24	html.with-featherlight nav {
25		margin-top: 0px;
26	}
27	.featherlight-previous, .featherlight-next {
28		display: none!important;
29	}
30	html.with-featherlight #sidebar ul:first-child {
31		position: -webkit-sticky;
32		position: sticky;
33	}
34	html.with-featherlight .wrap {
35		margin-top: 50px;
36	}
37}
38@media (max-width: 830px) {
39	html.with-featherlight nav {
40		margin-top: 0px;
41	}
42}
43@media (max-width: 1100px) and (min-width: 830px) {
44	html.with-featherlight header.featherlight-fix {
45		margin-bottom: 68px;
46	}
47	html.with-featherlight nav {
48		margin-top: 0;
49		margin-bottom: -7px;
50	}
51}
    

      
Copied!
      
      
    
    html {
	position: relative!important;
	overflow-x: hidden;
}
html.with-featherlight {
	overflow-y: hidden;
	width: 100%;
}
html.with-featherlight body {
	overflow-y: scroll;
}
html.with-featherlight nav.featherlight-fix {
	position: fixed;
	margin-top: 0;
	left: 0;
}
html.with-featherlight #sidebar.featherlight-fix ul:first-child {
	position: fixed;
}
html.with-featherlight .cc-window.cc-banner.cc-type-info.cc-theme-edgeless.cc-bottom.cc-color-override--591744288 {
	width: calc(100% - 17px);
}
@media (max-width: 830px) {
	html.with-featherlight nav {
		margin-top: 0px;
	}
	.featherlight-previous, .featherlight-next {
		display: none!important;
	}
	html.with-featherlight #sidebar ul:first-child {
		position: -webkit-sticky;
		position: sticky;
	}
	html.with-featherlight .wrap {
		margin-top: 50px;
	}
}
@media (max-width: 830px) {
	html.with-featherlight nav {
		margin-top: 0px;
	}
}
@media (max-width: 1100px) and (min-width: 830px) {
	html.with-featherlight header.featherlight-fix {
		margin-bottom: 68px;
	}
	html.with-featherlight nav {
		margin-top: 0;
		margin-bottom: -7px;
	}
}
    

Whilst experimenting with this I found that the built-in WordPress galleries did not work on Safari 10.1. I then filed a bug report which you can follow here: https://core.trac.wordpress.org/ticket/47744