Lock the body scroll to a certain height

Asked

Viewed 614 times

0

Good afternoon guys, my problem is this:

When I open the mobile menu of my site, the scroll height remains giant (the full page size). And I can’t add position 'Fixed' in the body because my menu has a height greater than 100vh (the menu has scroll Y).

What I need is the following: when opening the menu, limit the body scroll only to the end of the menu div. That way I could keep the scroll to view the entire menu, but I wouldn’t be stuck with a giant scroll for nothing.

  1. -> when you open the menu, add the "open" class - OK
  2. -> with the menu open, set the body height equal to the total menu height - OK
  3. -> limit the scroll to the end of the menu height (not to be with a giant scroll) - pending

I’m doing with jquery

my website: www.barradatijuca.com.br

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

javascript jquery mobile

  • If you add a position: fixed in the menu, make it occupy 100% of the width and height of the screen and add an overflow:Hidden in it the menu will occupy 100% of the screen, and the content within it will be "scrollable". In that case it would open by superimposing the body.

  • Didn’t work buddy, if I put the menu with position Fixed, it won’t roll down and some items won’t appear. Thanks anyway.

  • Opá! I got confused, in fact the menu should receive one overflow: auto, then the content that does not appear will have scroll.

  • Why don’t you make one min-height:296px; in his .menu-mobile.open{} and takes the height: 100%. It’s a more functional solution to your problem, I believe.

  • To remove the scroll just use media queries: @media (max-height:680px) { body { overflow-y: hidden; } }. Worse than removing scroll to hell from your menu, it’s hiding user content, I do not recommend it.

  • Ladies and gentlemen. I appreciate the attempt, but no method has worked to solve my problem. @Ivanferrer even removing the 100% and putting min-height in the menu, the body scroll continues.

  • The "n" ways to do this @Hugodeveza, the problem is that you haven’t published any code in the question, so it’s hard to publish an answer based only on the address of the site you’re producing. I’ll even publish a reply that could be applied to your system, but I don’t think you’ll know how to use it.

Show 2 more comments

1 answer

1

One way to solve the problem is by removing the scroll of the desired page or element, until the bearing height reaches the mark, however, you will need to inform that this rule only works for the mobile version (since it is a responsive version), so that no problem occurs 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 the .css(), every time he reached the page bearing limit.

   $(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’s an example method for mobile versions:

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

Browser other questions tagged javascript jquery mobile

You are not signed in. Login or sign up in order to post.