To be precise, you guys may have noticed that facebook has this ponent 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 ponent 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 acplish 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>

To be precise, you guys may have noticed that facebook has this ponent 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 ponent 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 acplish 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>

• javascript
• jquery
• html
• css

3 Answers 3

Look at the anatomy of a scrollbar. http://csdgn/inform/scrollbar-mechanics

The grip size is usually a multiplication factor * content ratio. If your content is 200px and the outer box is 100px, then your ratio is 2.0. Once the content gets large enough, the grip size would shrink to very small proportions, so you would want a minimum value for it.

The multiplication factor is going to be an arbitrary number of units which you can adjust so that the scrollbar is visually pleasing at all ratios.

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.

Don't use .css('height'), use .height(), this returns the calculated height, not the css value.