All geek questions in one place

Jquery: How can I reset the scroll bar of a document when adding a layer above the document?

How can I reset the scroll bar of a document when adding a layer above the document?

For example, it looks like a facebook page when you have a very long document and you need to scroll down to see old images / messages,

enter image description here

When you click on photos, the scroll bar has changed - it starts at the top, but the document page does not jump at all,

enter image description here

When you close the photo view layer, the scrollbar returns before it was before, but the page does not skip.

This is my working code so far, but it does not work the way I expect, like on facebook.

$('.get-photo').click(function(){ var object = $(this); var object_path = object.attr('href'); //alert(object_path); $(document.body).append("<div class='background-photo'></div>"); $(document.body).append('<div class="photos-holder"><img src="'+object_path+'" /></div>'); var layer_background = $('.background-photo'); var height_document = $(document).height(); var scroll_top = $(window).scrollTop(); layer_background.css({ width:'100%', height:height_document + 'px', background: '#fff', opacity: 0.4, position:'absolute', top:0, left:0, zIndex:'100' }); $('.photos-holder').css({ width:'800px', height:'500px', background:'#ffffff', border:'1px solid #000', marginLeft:'-400px', position:'absolute', top: scroll_top + 100 + "px", left:'50%', zIndex:"101" }); return false; });

Any ideas?

You can click the link, scroll and click on one of the photos to see what I mean.

0
source share
1 answer

Facebook uses css property: overflow

The image container has the following css properties:

 position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-x: auto; overflow-y: scroll;

This will create the effect you are looking for.

0
source

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

More articles:


All Articles