Question

I’m building a custom scroller for a project and i’m trying to work out how i would have the scroller handler reach the bottom of the window and for the content to also reach the bottom, ie. In this fiddle i have made: http://jsfiddle.net/BPcfc/ I use jQuery UI draggable to set the position top of the window to the same minus position of the dragged handle but when you pull the handle to the bottom of the window, there is still more content out of view. I dont even know what calculations to perform to work this out!?

The relevant JS:

$( "#dragger" ).draggable({ 
    axis: "y", 
    containment: "parent", 
    drag: function(event, ui) {
        var top = ui.offset.top;
        $('#move').css('top', '-'+top+'px');                    
    } 
});

Answer 1

The top position of your drag handle is just one thing. You have to factor in 3 more values in your calculation:

• The height of your scrolling window’s client area.
• The height of your content.
• The height of your drag handle.

Using these values, the calculation is quite simple:

(content_height - window_height) / (window_height - handle_height) * top
^Part 1                            ^Part 2                           ^Part 3

Part 1 is needed because one windowful of your content is visible on the screen. Part 2 is needed because your handle’s top position can only range from 0 to window_height - handle_height). Simply multiply it by top in part 3, and you’re done.

I also added a little one-liner to my code which you can freely remove. It resizes your handle to give a rough idea to the user how much content they should expect.

I’ll leave the rest up to you. You would need to see IF you need a scroller at all and check your divisions for zero values.

jsFiddle Demo

Javascript:

var window_height = $('#window').height();
var content_height = $('#move').height();

// Remove this line if you want a fixed size dragger
$('#dragger').css('height', Math.round(window_height / content_height * window_height));

var handle_height = $('#dragger').height();

$( "#dragger" ).draggable({ 
    axis: "y", 
    containment: "parent", 
    drag: function(event, ui) {
        var top = ui.offset.top;
        var newpos = Math.floor((content_height - window_height) / (window_height - handle_height) * top);
        $('#move').css('top', '-'+newpos+'px');                    
    } 
});
​

CSS:

#window {
    width: 500px;
    height: 500px;
    border: 1px solid red; 
    position: relative; 
    overflow: hidden;    
}

#dragger {
    width: 32px;
    height: 32px;
    background: green;
    position: absolute;
    right: 0;
    top: 0;
}

#move {
    width: 100px;
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    word-break: break-word;
    color: white;   
}
​

HTML:

<div id="window">

    <div id="move">Bacon swine pastrami, prosciutto corned beef cow capicola chicken. Ham hock andouille shoulder short ribs strip steak beef ribs. Short loin swine andouille beef ribs, capicola sausage chicken salami strip steak corned beef meatball shankle t-bone chuck. Beef swine biltong, brisket meatball boudin pastrami chicken salami chuck shankle meatloaf pork loin. Meatloaf shoulder pig, pancetta beef ribs kielbasa ham hock ham t-bone.Bacon swine pastrami, prosciutto corned beef cow capicola chicken. Ham hock andouille shoulder short ribs strip steak beef ribs. Short loin swine andouille beef ribs, capicola sausage chicken salami strip steak corned beef meatball shankle t-bone chuck. Beef swine biltong, brisket meatball boudin pastrami chicken salami chuck shankle meatloaf pork loin. Meatloaf shoulder pig, pancetta beef ribs kielbasa ham hock ham t-bone.</div> 
    <div id="dragger"></div>        

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>