diff --git a/jquery.scroll.js b/jquery.scroll.js index 26d0308..106505f 100644 --- a/jquery.scroll.js +++ b/jquery.scroll.js @@ -34,21 +34,21 @@ * | | | +------+ | * | | | | +--+ | | * | | | | | | | | - * | | |  | | <-------------- handle - * | | |  | | | | | - * | | |  | | | | | - * | | |  | | | | | - * | | |  | +--+ | | - * | | |  | | | - * | | |  | <-------------- handle container - * | | |  | | | + * | | | | | <-------------- handle + * | | | | | | | | + * | | | | | | | | + * | | | | | | | | + * | | | | +--+ | | + * | | | | | | + * | | | | <-------------- handle container + * | | | | | | * | | <----------------------------- pane - * | | |  | | | - * | | |  | | | - * | | |  +------+ | - * | | |  | | | - * | | |  | <-------------- handle arrow down - * | +-----------------+  +------+ | + * | | | | | | + * | | | | | | + * | | | +------+ | + * | | | | | | + * | | | | <-------------- handle arrow down + * | +-----------------+ +------+ | * | | * +----------------------------------| * @@ -119,7 +119,8 @@ 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] + scrollStepArrows: 3, // handle increment between two mousedowns within the handle container [px] + scrollTop: 0 }; @@ -180,7 +181,7 @@ // 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'); @@ -188,6 +189,8 @@ 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({ @@ -242,8 +245,11 @@ // calculate positions and dimensions of handle and arrow-handles // initHandle: function(){ + this.props.handleContainerHeight = this.handleContainer.height(); this.props.contentHeight = this.pane.height(); + + var startPct = this.opts.scrollTop/(this.pane.height()-this.container.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; @@ -257,12 +263,17 @@ min: 0, max: this.props.handleContainerHeight - this.props.handleHeight }; + + var handleInitTop = startPct <= 1 ? this.props.handleTop.max*startPct : this.props.handleTop.max // 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; + this.handle.top = handleInitTop; + + this.setHandlePosition() + this.setContentPosition() }, @@ -313,7 +324,6 @@ startOfHandleMove: function(ev){ ev.preventDefault(); ev.stopPropagation(); - // set start position of mouse this.mouse.start = this.mousePosition(ev); @@ -383,6 +393,7 @@ this.pane.top = -1 * this.props.handleContentRatio * this.handle.top; this.pane[0].style.top = this.pane.top + 'px'; + }, @@ -617,4 +628,4 @@ return $.event.handle.apply(this, args); }; -})(jQuery, document); // inject global jQuery object +})(jQuery, document); // inject global jQuery object \ No newline at end of file