Scrollbar scroller ikke til hvor teksten stopper

Hej allesammen,

Jeg forsøger at bruge en scrollbar som allerede er lavet, men den scroller ikke helt ned til hvor teksten slutter. og selve scroll paletten forsvinder når den kommer for langt ned, den burde jo ikke kunne komme længere ned end hvor scroll baggrunden stopper.
I kan se et eksempel her: http://wearecrunch.dk/gammelsjuf/

man kan enten hive fat i scrollbaren eller bruget scrollhjulet på musen for at se at den fortsætter men alligevel ikke viser alt teksten.

Jeg håber der er en der kan hjælpe mig

Her er min jquery kode:

 (function($, document){
 
     $.fn.scrollbar = function(opts){
 
         // Extend default options
         var options = $.extend({}, $.fn.scrollbar.defaults, opts);
 
        
         //
         // append scrollbar to selected overflowed containers and return jquery object for chainability
         //
         return this.each(function(){
 
             var container = $(this)
                
                 // properties
               , props = {
                     arrows: options.arrows
                 };
 
             // set container height explicitly if given by an option
             if(options.containerHeight != 'auto'){
                 container.height(options.containerHeight);
             }
            
             // save container height in properties
             props.containerHeight = container.height();
 
             // save content height in properties
             props.contentHeight = $.fn.scrollbar.contentHeight(container);
 
             // if the content height is lower than the container height, do nothing and return.
             if(props.contentHeight <= props.containerHeight){
                 return true;
             }
 
             // create a new scrollbar object
             var scrollbar = new $.fn.scrollbar.Scrollbar(container, props, options);
            
             // build HTML, initialize Handle and append Events
             scrollbar.buildHtml().initHandle().appendEvents();
         });
     };
 
 
 
     // # default options
     //
     //
     $.fn.scrollbar.defaults = {
        
         // ### containerHeight `Number` or `'auto'`
         //
         // height of content container. If set to `'auto'`, the naturally rendered height is used
         containerHeight:  'auto',
        
         arrows:            true,      // render up- and down-arrows
         handleHeight:      'auto',    // height of handle [px || 'auto']. If set to 'auto', the height will be calculated proportionally to the container-content height.
         handleMinHeight:  30,        // min-height of handle [px]. This property will only be used if handleHeight is set to 'auto'
        
         scrollSpeed:      50,        // speed of handle while mousedown on arrows [milli sec]
         scrollStep:        20,        // handle increment between two mousedowns on arrows [px]
        
         scrollSpeedArrows: 40,        // speed of handle while mousedown within the handle container [milli sec]
         scrollStepArrows:  3          // handle increment between two mousedowns within the handle container [px]
     };
 
 
 
     //
     // Scrollbar constructor
     //
     $.fn.scrollbar.Scrollbar = function(container, props, options){
 
         // set object properties
         this.container = container;
         this.props =    props;
         this.opts =      options;
         this.mouse =    {};
 
         // disable arrows via class attribute 'no-arrows' on a container
         this.props.arrows = this.container.hasClass('no-arrows') ? false : this.props.arrows;
     };
 
     //
     // Scrollbar methods
     //
     $.fn.scrollbar.Scrollbar.prototype = {
 
         //
         // build DOM nodes for pane and scroll-handle
         //
         //  from:
         //
         //      <div class="foo">                                  --> arbitrary element with a fixed height or a max-height lower that its containing elements
         //          [...]
         //      </div>
         //
         //  to:
         //
         //      <div class="foo">                                  --> this.container
         //          <div class="scrollbar-pane">                    --> this.pane
         //              [...]
         //          </div>
         //          <div class="scrollbar-handle-container">        --> this.handleContainer
         //              <div class="scrollbar-handle"></div>        --> this.handle
         //          </div>
         //          <div class="scrollbar-handle-up"></div>        --> this.handleArrows
         //          <div class="scrollbar-handle-down"></div>      --> this.handleArrows
         //      </div>
         //
         //
         // TODO: use detach-transform-attach or DOMfragment
         //
         buildHtml: function(){
 
             // build new DOM nodes
             this.container.children().wrapAll('<div class="scrollbar-pane"/>');
             this.container.append('<div class="scrollbar-handle-container"><div class="scrollbar-handle"/></div>');
             if(this.props.arrows){
                 this.container.append('<div class="scrollbar-handle-up"/>').append('<div class="scrollbar-handle-down"/>');
             }
 
             // save height of container to re-set it after some DOM manipulations
             var height = this.container.height();
 
             // set scrollbar-object properties
             this.pane =            this.container.find('.scrollbar-pane');
             this.handle =          this.container.find('.scrollbar-handle');
             this.handleContainer = this.container.find('.scrollbar-handle-container');
             this.handleArrows =    this.container.find('.scrollbar-handle-up, .scrollbar-handle-down');
             this.handleArrowUp =  this.container.find('.scrollbar-handle-up');
             this.handleArrowDown = this.container.find('.scrollbar-handle-down');
 
             // set some default CSS attributes (may be overwritten by CSS definitions in an external CSS file)
             this.pane.defaultCss({
                 'top':      0,
                 'left':    0
             });
             this.handleContainer.defaultCss({
                 'right':    0
             });
             this.handle.defaultCss({
                 'top':      0,
                 'right':    0
             });
             this.handleArrows.defaultCss({
                 'right':    0
             });
             this.handleArrowUp.defaultCss({
                 'top':      0
             });
             this.handleArrowDown.defaultCss({
                 'bottom':  0
             });
 
             // set some necessary CSS attributes (can NOT be overwritten by CSS definitions)
             this.container.css({
                 'position': this.container.css('position') === 'absolute' ? 'absolute' : 'relative',
                 'overflow': 'hidden',
                 'height':  height
             });
             this.pane.css({
                 'position': 'absolute',
                 'overflow': 'visible',
                 'height':  'auto'
             });
             this.handleContainer.css({
                 'position': 'absolute',
                 'top':      this.handleArrowUp.outerHeight(true),
                 'height':  (this.props.containerHeight - (this.container.outerHeight(true) - this.container.height()) - this.handleArrowUp.outerHeight(true) - this.handleArrowDown.outerHeight(true)) + 'px'
             });
             this.handle.css({
                 'position': 'absolute',
                 'cursor':  'pointer'
             });
             this.handleArrows.css({
                 'position': 'absolute',
                 'cursor':  'pointer'
             });
            
             return this;           
         },
 
 
         //
         // calculate positions and dimensions of handle and arrow-handles
         //
         initHandle: function(){
             this.props.handleContainerHeight = this.handleContainer.height();
             this.props.contentHeight = this.pane.height();
 
             // height of handle
             this.props.handleHeight = this.opts.handleHeight == 'auto' ? Math.max(Math.ceil(this.props.containerHeight * this.props.handleContainerHeight / this.props.contentHeight), this.opts.handleMinHeight) : this.opts.handleHeight;
             this.handle.height(this.props.handleHeight);
 
             // if handle has a border (always be aware of the css box-model), we need to correct the handle height.
             this.handle.height(2 * this.handle.height() - this.handle.outerHeight(true));
 
             // min- and max-range for handle
             this.props.handleTop = {
                 min: 0,
                 max: this.props.handleContainerHeight - this.props.handleHeight
             };
 
             // ratio of handle-container-height to content-container-height (to calculate position of content related to position of handle)
             this.props.handleContentRatio = (this.props.contentHeight - this.props.containerHeight) / (this.props.handleContainerHeight - this.props.handleHeight);
 
             // initial position of handle at top
             this.handle.top = 0;
            
             return this;
         },
 
 
         //
         // append events on handle and handle-container
         //
         appendEvents: function(){
 
             // append drag-drop event on scrollbar-handle
             this.handle.bind('mousedown.handle', $.proxy(this, 'startOfHandleMove'));
 
             // append mousedown event on handle-container
             this.handleContainer.bind('mousedown.handle', $.proxy(this, 'onHandleContainerMousedown'));
 
             // append hover event on handle-container
             this.handleContainer.bind('mouseenter.container mouseleave.container', $.proxy(this, 'onHandleContainerHover'));
 
             // append click event on scrollbar-up- and scrollbar-down-handles
             this.handleArrows.bind('mousedown.arrows', $.proxy(this, 'onArrowsMousedown'));
 
             // append mousewheel event on content container
             this.container.bind('mousewheel.container', $.proxy(this, 'onMouseWheel'));
 
             // append hover event on content container
             this.container.bind('mouseenter.container mouseleave.container', $.proxy(this, 'onContentHover'));
 
             // do not bubble down click events into content container
             this.handle.bind('click.scrollbar', this.preventClickBubbling);
             this.handleContainer.bind('click.scrollbar', this.preventClickBubbling);
             this.handleArrows.bind('click.scrollbar', this.preventClickBubbling);
            
             return this;
         },
 
 
         //
         // get mouse position helper
         //
         mousePosition: function(ev) {
             return ev.pageY || (ev.clientY + (document.documentElement.scrollTop || document.body.scrollTop)) || 0;
         },
 
 
 
         // ---------- event handler ---------------------------------------------------------------
 
         //
         // start moving of handle
         //
         startOfHandleMove: function(ev){
             ev.preventDefault();
             ev.stopPropagation();
 
             // set start position of mouse
             this.mouse.start = this.mousePosition(ev);
 
             // set start position of handle
             this.handle.start = this.handle.top;
 
             // bind mousemove- and mouseout-event on document (binding it to document allows having a mousepointer outside handle while moving)
             $(document).bind('mousemove.handle', $.proxy(this, 'onHandleMove')).bind('mouseup.handle', $.proxy(this, 'endOfHandleMove'));
 
             // add class for visual change while moving handle
             this.handle.addClass('move');
             this.handleContainer.addClass('move');
         },
 
 
         //
         // on moving of handle
         //
         onHandleMove: function(ev){
             ev.preventDefault();
 
             // calculate distance since last fireing of this handler
             var distance = this.mousePosition(ev) - this.mouse.start;
 
             // calculate new handle position
             this.handle.top = this.handle.start + distance;
 
             // update positions
             this.setHandlePosition();
             this.setContentPosition();
         },
 
 
         //
         // end moving of handle
         //
         endOfHandleMove: function(ev){
 
             // remove handle events (which were attached in the startOfHandleMove-method)
             $(document).unbind('.handle');
 
             // remove class for visual change
             this.handle.removeClass('move');
             this.handleContainer.removeClass('move');
         },
 
 
         //
         // set position of handle
         //
         setHandlePosition: function(){
 
             // stay within range [handleTop.min, handleTop.max]
             this.handle.top = (this.handle.top > this.props.handleTop.max) ? this.props.handleTop.max : this.handle.top;
             this.handle.top = (this.handle.top < this.props.handleTop.min) ? this.props.handleTop.min : this.handle.top;
 
             this.handle[0].style.top = this.handle.top + 'px';
         },
 
 
         //
         // set position of content
         //
         setContentPosition: function(){
 
             // derive position of content from position of handle
             this.pane.top = -1 * this.props.handleContentRatio * this.handle.top;
 
             this.pane[0].style.top = this.pane.top + 'px';
         },
 
 
         //
         // mouse wheel movement
         //
         onMouseWheel: function(ev, delta){
 
             // calculate new handle position
             this.handle.top -= delta*10;
 
             this.setHandlePosition();
             this.setContentPosition();
 
             // prevent default scrolling of the entire document if handle is within [min, max]-range
             if(this.handle.top > this.props.handleTop.min && this.handle.top < this.props.handleTop.max){
                 ev.preventDefault();
             }
         },
 
 
         //
         // append click handler on handle-container (outside of handle itself) to click up and down the handle
         //
         onHandleContainerMousedown: function(ev){
             ev.preventDefault();
 
             // do nothing if clicked on handle
             if(!$(ev.target).hasClass('scrollbar-handle-container')){
                 return false;
             }
 
             // determine direction for handle movement (clicked above or below the handler?)
             this.handle.direction = (this.handle.offset().top < this.mousePosition(ev)) ? 1 : -1;
 
             // set incremental step of handle
             this.handle.step = this.opts.scrollStep;
 
             // stop handle movement on mouseup
             var that = this;
             $(document).bind('mouseup.handlecontainer', function(){
                 clearInterval(timer);
                 that.handle.unbind('mouseenter.handlecontainer');
                 $(document).unbind('mouseup.handlecontainer');
             });
 
             // stop handle movement when mouse is over handle
             //
             // TODO: this event is fired by Firefox only. Damn!
             //      Right now, I do not know any workaround for this. Mayby I should solve this by collision-calculation of mousepointer and handle
             this.handle.bind('mouseenter.handlecontainer', function(){
                 clearInterval(timer);
             });
 
             // repeat handle movement while mousedown
             var timer = setInterval($.proxy(this.moveHandle, this), this.opts.scrollSpeed);
         },
 
 
         //
         // append mousedown handler on handle-arrows
         //
         onArrowsMousedown: function(ev){
             ev.preventDefault();
 
             // determine direction for handle movement
             this.handle.direction = $(ev.target).hasClass('scrollbar-handle-up') ? -1 : 1;
 
             // set incremental step of handle
             this.handle.step = this.opts.scrollStepArrows;
 
             // add class for visual change while moving handle
             $(ev.target).addClass('move');
 
             // repeat handle movement while mousedown
             var timer = setInterval($.proxy(this.moveHandle, this), this.opts.scrollSpeedArrows);
 
             // stop handle movement on mouseup
             $(document).one('mouseup.arrows', function(){
                 clearInterval(timer);
                 $(ev.target).removeClass('move');
             });
         },
        
        
         //
         // move handle by a distinct step while click on arrows or handle-container
         //
         moveHandle: function(){
             this.handle.top = (this.handle.direction === 1) ? Math.min(this.handle.top + this.handle.step, this.props.handleTop.max) : Math.max(this.handle.top - this.handle.step, this.props.handleTop.min);
             this.handle[0].style.top = this.handle.top + 'px';
 
             this.setContentPosition();
         },
        
        
         //
         // add class attribute on content while interacting with content
         //
         onContentHover: function(ev){
             if(ev.type === 'mouseenter'){
                 this.container.addClass('hover');
                 this.handleContainer.addClass('hover');
             } else {
                 this.container.removeClass('hover');
                 this.handleContainer.removeClass('hover');
             }
         },
        
        
         //
         // add class attribute on handle-container while hovering it
         //
         onHandleContainerHover: function(ev){
             if(ev.type === 'mouseenter'){
                 this.handleArrows.addClass('hover');
             } else {
                 this.handleArrows.removeClass('hover');
             }
         },
        
        
         //
         // do not bubble down to avoid triggering click events attached within the container
         //
         preventClickBubbling: function(ev){
             ev.stopPropagation();
         }
     };
 
 
     // ----- helpers ------------------------------------------------------------------------------
 
     //
     // determine content height
     //
     $.fn.scrollbar.contentHeight = function(elem){
 
       // clone and wrap content temporarily and meassure content height within the original context.
       // wrapper container need to have an overflow set to 'hidden' to respect margin collapsing
 
 
       // TODO: analyse anlternative which does not require an additional container. a clone may also allow to meassure a non visible element.
 /*
       var clone = elem.clone().wrapInner('<div/>').find(':first-child');
       elem.append(clone);
       var height = clone.css({overflow:'hidden'}).height();
       clone.remove();
 
       return height;
 */
       var content = elem.wrapInner('<div/>');
       var height = elem.find(':first').css({overflow:'hidden'}).height();
 
       return height;
 
       // FIXME: manipulating the DOM is not the resposibility of $.fn.scrollbar.contentHeight()
     };
 
 
     //
     // ----- default css ---------------------------------------------------------------------
     //
     $.fn.defaultCss = function(styles){
 
         // 'not-defined'-values
         var notdef = {
             'right':    'auto',
             'left':    'auto',
             'top':      'auto',
             'bottom':  'auto',
             'position': 'static'
         };
 
         // loop through all style definitions and check for a definition already set by css.
         // if no definition is found, apply the default css definition
         return this.each(function(){
             var elem = $(this);
             for(var style in styles){
                 if(elem.css(style) === notdef[style]){
                     elem.css(style, styles[style]);
                 }
             }
         });
     };
 
 
     //
     // ----- mousewheel event ---------------------------------------------------------------------
     // based on jquery.mousewheel.js from Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
     //
     $.event.special.mousewheel = {
 
         setup: function(){
             if (this.addEventListener){
                 this.addEventListener('mousewheel', $.fn.scrollbar.mouseWheelHandler, false);
                 this.addEventListener('DOMMouseScroll', $.fn.scrollbar.mouseWheelHandler, false);
             } else {
                 this.onmousewheel = $.fn.scrollbar.mouseWheelHandler;
             }
         },
 
         teardown: function(){
             if (this.removeEventListener){
                 this.removeEventListener('mousewheel', $.fn.scrollbar.mouseWheelHandler, false);
                 this.removeEventListener('DOMMouseScroll', $.fn.scrollbar.mouseWheelHandler, false);
             } else {
                 this.onmousewheel = null;
             }
         }
     };
 
 
     $.fn.extend({
         mousewheel: function(fn){
             return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
         },
 
         unmousewheel: function(fn){
             return this.unbind("mousewheel", fn);
         }
     });
 
 
     $.fn.scrollbar.mouseWheelHandler = function(event) {
         var orgEvent = event || window.event,
             args = [].slice.call(arguments, 1),
             delta = 0,
             returnValue = true,
             deltaX = 0,
             deltaY = 0;
 
         event = $.event.fix(orgEvent);
         event.type = "mousewheel";
 
         // Old school scrollwheel delta
         if(event.wheelDelta){
             delta = event.wheelDelta / 120;
         }
         if(event.detail){
             delta = -event.detail / 3;
         }
 
         // Gecko
         if(orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS){
             deltaY = 0;
             deltaX = -1 * delta;
         }
 
         // Webkit
         if(orgEvent.wheelDeltaY !== undefined){
             deltaY = orgEvent.wheelDeltaY / 120;
         }
         if(orgEvent.wheelDeltaX !== undefined){
             deltaX = -1 * orgEvent.wheelDeltaX / 120;
         }
 
         // Add event and delta to the front of the arguments
         args.unshift(event, delta, deltaX, deltaY);
 
         return $.event.handle.apply(this, args);
     };
    
 })(jQuery, document);  // inject global jQuery object

Oh her er min css som har noget med det at gøre

 .scrollbar-pane {
     margin-right: 16px;
    
 }
 
 .scrollbar-handle-container {
     background: #555;
     width: 10px;
 }
 
 .scrollbar-handle-container.hover,
 .scrollbar-handle-container.move {
     background: #555;
 }
 
 .scrollbar-handle {
     width: 8px;
     border: 1px solid #666;
     background: #333 url('../images/scrollbar-handle-bg.png') no-repeat 1px 50%;
 
     border-radius: 0px 5px 5px 0px;
     -moz-border-radius: 0px 5px 5px 0px;
     -webkit-border-top-right-radius: 5px;
     -webkit-border-bottom-right-radius: 5px;
 
 }
 
 .scrollbar-handle:hover {
     border: 1px solid #555;
 }
 
 .scrollbar-handle.move {
     border: 1px solid #666;
     background-color: #999;
 }

Jeg tror det er i jquery filen jeg skal ændre noget, men jeg vil sætte stor pris på hvis en kunne hjælpe mig.

Jeg håber i forstår hvad jeg mener.

På forhånd tak