Limit scrollbar according to div size

Asked

Viewed 2,907 times

5

Is there any way to limit the barra de rolagem page according to the size (height) of a div?

Let’s say I have a website like any other, but when opening one box floating with a height of 1000px, I want the scroll mouse lock when reaching the end of this div, even if the site continues down, only allow scrolling up. Of course when this div is closed, the scroll back to normal.

jquery html css rolling

2 answers

4


Yes it is possible, there are different ways, one of them is using Javascript/jQuery to know the dimensions and position of the element to be able to synchronize the scroll with these values.

Use .offset() can know where the element begins and adding to it the .outerHeight() knows where it ends. Then you need to know the value of scroll and this can get with .scroll(). To finish, and once the scroll event is not cancellable, you have to rewrite the value of the scroll if it passes "the limits".

Code suggestion:

var ultimoScroll;
var dialogPosition = $('#seu_dialog').offset().top;
var dialogHeight = $('#seu_dialog').outerHeight();
$(window).on('scroll', function () {
    var scroll = $(this).scrollTop();
    if (scroll > dialogPosition + dialogHeight.outerHeight() || scroll < dialogPosition) $(window).scrollTop(ultimoScroll);
    else ultimoScroll = scroll;
});

This is the skeleton you need. As you did not give any HTML/CSS/JS code I leave an example invented by me that with an adaptation of this code I mentioned above: http://jsfiddle.net/a825dnfm/

  • Hi Sergio, I adapted your code to my script and just fixed there dialogHeight.outerHeight() for only dialogHeight. His code worked as well as I wanted, but he is locking the scroll at the end of the div, IE, the div goes all the way to the top and hangs at the end of it. You’d have to crash when the div end is at the bottom of the screen, so you can’t climb any higher.

  • 1

    Of course, I was just going to make a calculation by decreasing the height of the window and that was it! I modified the if for: if (scroll > dialogPosition + ( dialogHeight - SC(window).height() ), thank you!!

  • Sergio, can you tell me how to make this code work on mobile? Because the site is responsive and viewed on smartphones or tablets, this scroll scheme does not work.

  • 1

    @Ricardo the code should work on mobile. I know that jQuery does not officially support mobile, hence jQuery mobile. If you have problems on mobile put an example with your code to test.

  • Ah tah. Don’t Linkei a jQuery mobile library. I’ll do it then. Thank you.

2

Use css. With the overflow attribute you can determine what happens when the size of an object is larger than the space it is in. For example:

#id {
    overflow: hidden;
}

This means that when the width and the length of the body tag are larger than the screen, there will be no scrolling. In your case the most appropriate would be:

#id {
    max-height: 1000px !important;
    overflow: hidden;
}

Browser other questions tagged jquery html css rolling

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