Ahmad Muzakki
Ahmad Muzakki

Reputation: 1088

how to make facebook theater view

when you click photo on facebook it show pop up, it's look like can be done with lightbox or something like that, look at address bar, the url was changed, it can be done with pushState javascript method

BUT do you look at the browser vertical scrollbar? it's like opening new page when the page doesn't overflow I'm sure its not using

body{
        overflow:hidden
} 

because when you open Developer Tools (in Chrome) that scrollbar is active

It just like a whole new page, I hope you understand my question, sorry for bad english

Upvotes: 0

Views: 226

Answers (1)

Julian H. Lam
Julian H. Lam

Reputation: 26134

When a picture is opened into the lightbox-style viewer, you are correct in that the URLs are changed via pushState.

The scrollbar is rendered inactive by a simple trick where the content of the entire page (the album, or feed, or whatever page you were on prior) gets assigned the class _31e (this seems to be dynamically generated, so it is not always going to be named this).

_31e assigns the following CSS styles to the container:

position: fixed;
top: 0px;

You'll see it applied to the second div after the opening body tag.

Upvotes: 1

Related Questions