Lock the body scroll up to a certain height

Question

Lock the body scroll up to a certain height

Navigation

#1 by (1 votes)

0

Good afternoon guys, my problem is this:

When I open the mobile menu of my site, the height of the scroll remains large (the total size of the page). And I can not add 'fixed' position in the body because my menu has a height greater than 100vh (the menu has scroll Y).

What I need is this: when opening the menu, limit the scroll of the body only to the end of the menu div. This way I could keep scrolling to view the entire menu, but I would not stick with a giant scroll at random.

- > when you open the menu, add the class "open" - OK

- > with the menu open, set the height of the body equal to the total height of the menu - OK

- > limit the scroll to the end of the menu height (not to have a giant scroll) - pending

I'm doing with jquery

My site: www.barradatijuca.com.br

I searched a lot for a solution to my problem and did not find ... I tried to use the scrolltofixed plugin, but it did not work ... Thank you for your attention.

javascript jquery mobile

asked by anonymous 14.11.2016 / 17:53

1 answer

validate 2 recaptchas on memsa pagina por ajax Fix the error in XML

score 1 · Answer 1

One way to work around the problem is to remove the scroll of the page or element you want, until the height of the bearing hits the mark, however, you will need to inform that this rule only works for the mobile version. it is a responsive version), so that the problem does not occur when it is full screen on the PC.

$(function() {
 var mobile = isMobile(), /* aqui você retornaria "true"
                             através de algum método que
                             define quando for mobile
                             ou a medida que você considera 
                             aceitável */
     altura_limite = 825; 
    $(window).scroll(function() {
        if ($(window).scrollTop() >= altura_limite && mobile == true) {
            $('body').css('overflow':'hidden');
        } else {
            $('body').css('overflow':'auto');
        }
    });
});

Another suggestion is to create a class in the element:

body.hide-scroll {
  overflow:hidden
}

Instead of setting .css() , every time it reaches the limit of the page's bearing.

   $(function() {
     var mobile = true, altura_limite = 825; 
        $(window).scroll(function() {
            if ($(window).scrollTop() >= altura_limite && mobile == true) {
                $('body').addClass('hide-scroll');
            } else {
                $('body').removeClass('hide-scroll');
            }
        });
    });

Here is an example of a method for mobile versions:

function isMobile() { 
 if (typeof window.orientation !== 'undefined') {
    return true;
  } else {
    return false;
  }
}