Limit scrollbar according to div size

5

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

Let's say I have a site like any other, but when I open a floating% 1000px height, I want the div of the mouse to hang when it reaches the end of this box , even if the site continues down, only allow scrolling up. Of course, when this scroll is closed, div returns to normal.

    
asked by anonymous 15.12.2014 / 19:53

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 those values.

If you use .offset() you can know where the element begins and adding it to .outerHeight() knows where it ends. Then you need to know the value of scroll and you can get it with .scroll() . To end, and since the scroll event is not cancelable, you must re-type the scroll value if it passes "the boundaries."

Code hint:

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 of what you need. Since I 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: link

    
15.12.2014 / 23:14
2

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

#id {
    overflow: hidden;
}

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

#id {
    max-height: 1000px !important;
    overflow: hidden;
}
    
15.12.2014 / 21:34