Have you ever noticed that Facebook has a unique component on the right-most column? When the browser window is maximized, it looks like this:
But when you resize your browser window to be smaller, it changes to this:
The grip within the overflowing container also resizes along with the rest of the components. This allows for easy scrolling down to the bottom element inside the container.
A similar component can be created using jQuery-Ui:
However, the challenge lies in calculating the new grip size when the container is resized:
Although progress has been made, the grip still needs to be adjusted to enable smooth scrolling to the bottom, just like the one seen on Facebook.
So, the question remains: what formula should be used to achieve this?
Here’s an attempt at a calculation function:
function calculate_grip_size() {
h = (parseFloat($('#box-container').css('height')) / parseFloat($('#box').css('height')))*100;
$('#grip').css('height', h);
}
And here is the corresponding HTML code:
<div id="box-container">
<div id="area-track">
<div id="grip">
</div>
</div>
<div id="box">
<div class="ipsum"> Lorem ipsum... </div>
<div class="ipsum"> Lorem ipsum... </div>
<div class="ipsum"> Lorem ipsum... </div>
<div class="ipsum"> Lorem ipsum... </div>
<div class="ipsum"> Lorem ipsum... </div>
<div class="ipsum"> Lorem ipsum </div>
</div>
</div>