CODEWITHSUNDEEP
javascriptjqueryhtmlcssscrolltop
kieranstartup
kieranstartup

Reputation: 77

Position element in centre of visible viewport window with overflow-y:scroll

I've rather roughly built this website which uses an effect similar to the iOS Safari tab view to look at various pages of a virtual book. Everything is working fine apart from the fact that I can't centre each page in the visible viewport. For example if you scroll down to the final 'page' and click on it, it jumps to the top of the document, instead of staying in the centre of the visible viewport.

I think this is to do with the fact that the scrollable div uses overflow-y:scroll, but I just can't figure out for the life of me how to fix the problem.

Any help would be greatly appreciated!!

Here's my jQuery:

jQuery(document.body).on('click', '.page', function() { //Change to touchstart

// Generate number between 1 + 2
var randomClass = 3;
var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1;

// Initialise & Random Number
jQuery(this).addClass("activated").addClass('scaled-' + randomNumber);

// Exiting - Reset All
jQuery(document.body).on('click', '.activated', function() { //Change to Touchstart
  jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3");
});
});

And here is a jsfiddle with all my code in it so you can get a better idea of what I'm trying to achieve.

https://jsfiddle.net/ontu1ngq/

Thanks!

Upvotes: 1

Views: 594

Answers (1)

digglemister
digglemister

Reputation: 1487

You need to get the amount that #wrapper has been scrolled, so that you can use that to set the top of the .page accordingly. Then, when you remove the .activated class, you will just need to remove the inline top style.

jQuery(document.body).on('click', '.page', function() { 
    var randomClass = 3;
    var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1;
    jQuery(this).addClass("activated").addClass('scaled-' + randomNumber);

    var wrapper_scrollTop = $("#wrapper").scrollTop(); //gets amount scrolled
    var half_wrapper = $("#wrapper").height()*(0.5); //50% of wrapper height
    jQuery(this).css("top",half_wrapper+wrapper_scrollTop);

    jQuery(document.body).on('click', '.activated', function() { 
        jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3");
        jQuery(this).css("top","") //returns top to original value specified in css
    });
});

Check out this working fiddle: https://jsfiddle.net/tardhepc/1/

Upvotes: 1

Related Questions