All geek questions in one place

Limited image scrolling

I am developing a mobile site and the full screen image will appear as a floating layer after loading the website.

Please see below ........ enter image description here

A: My mobile site contains a lot of content that exceeds the height of the windows

B: After the page loads, the full-screen image appears as a floating layer on top of the content. Image exceeds window height

C: When the user scrolls down, he can see the bottom of the image, but not the contents of the website. The bottom of the image should never be detached from the bottom of the screen no matter how the user tries to scroll down.

May I know how can I reach C ??

In addition, in situation B, sometimes the image cannot exceed the height of the screen if the user uses a smartphone with a large screen, in which case the image should be fixed at the top of the screen and not scroll.

It would be better if all of the above was achieved NOT using jquery. However, if necessary, then it is still normal ........

Thank you very much.

+6
source share
1 answer

Although the overall effect is only possible with CSS, you probably need javascript to turn the effect on and off.

The general idea is to use position: fixed and overflow: scroll on the layer containing the image, and body - overflow: hidden . In these conditions, you can scroll the contents of the overlay, but not the body.

While this works on the desktop, on the mobile phone, everything is a little different, and all the contents will be displayed, despite the overflow: hidden on the body . Quick work is to apply position: fixed to the body . I don't know if this is the intended behavior, but it works fine in both Safari and Chrome on iOS.

Markup Outlines:

 <body class="no-scroll"> <section class="content"> /* content here */ </section> <aside class="overlay"> <img src="img.jpg"> </aside> </body>

CSS

 .no-scroll { overflow: hidden; position: fixed; } .overlay { overflow-y: scroll; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; } .overlay img { width: 100%; height: auto; } .no-scroll .overlay { display: block; }

With this, you can use javascript to switch the no-scroll class to body . When it is there, overflowing content is hidden and overlay displayed. When he is absent there, overlay is hidden.

Here is an example effect (without the .no-scroll and javascript class, however, to show that it works):

Edit:

In the above example, I gave overlay translucent background and gave a max-width image of 100% inside it. If you want the entire screen to be filled with an image, change max-width to normal width .

Edit 2:

As requested here, the jQuery function to switch the effect.

 $(".close").click(function() { $("body").toggleClass("no-scroll"); });

Just give <button> or any other close class name, and it will turn the effect on and off.

+1
source

Source: https://habr.com/ru/post/955851/

More articles:


All Articles