Question

To be precise, you guys may have noticed that facebook has this component placed on the right-most column, this is how it would look when the browser window is maximized:

Now, If I resize my browser window to an smaller size, this is how it looks:

As you can see, as the overflowing container re-sizes(because of browser-window re-size), the grip(circled in red) is re-sized too. This to allow scrolling down to the bottom element inside the over-flowing container

I have created a similar component using jQuery-Ui:

But my problem is that I haven’t been able to calculate the NEW grip size for when the container is resized:

Here you can see that I’m almost there, but the grip should indeed be smaller to allow scrolling to the bottom (like the Facebook one).

My Question is, What formula do you suggest using to accomplish this?

Here’s what I’ve been trying so far:

function calculate_grip_size() {
  h = (parseFloat($('#box-container').css('height')) / parseFloat($('#box').css('height'))) * 100;
  $('#grip').css('height', h);
}

and the corresponding HTML for it:

<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>

Answer 1

I was checking out this plugin called slimScroll earlier and the author uses this method – translated to match your selectors (I think); although it would be better to generalize the selectors by using class names instead of IDs:

var minH = 50,
    h = Math.max( $('#box-container').outerHeight() / parseInt($('#box').prop('scrollHeight'),10) * 100, minH );
$('#grip').height(h);

Update: Oops, bad math and forgot to parse the scrollHeight value. Try it now.

Update #2: Ok, I think I found the problem… well two problems.

1. The above calculation didn’t take into account that the grip was inside of the area-track which isn’t the same height as the box-container

   $('#grip').height($('#area-track').height() * h);
   

2. The content was being positioned as a 1:1 ratio with the grip, so it needed to be divided by the content ratio

   increment = parseInt(ui.helper.css('top')) / -h;
   

And here is a demo I made using the code you shared.

Oh, and I had to add padding-bottom: 25px; to the #box css definition so the whole ipsum box was visible – adjust as needed because it depends on how much padding is there.