jScroll
jScroll copied to clipboard
unset height of div : possible bug
Browser in Question: FF v 3.5.4, Safari v 5.0.1, Opera v 11.5 OS: Mac OS X 10.5.8
Issue:
In the event that the container div does not have a height set in css the plugin will currently scroll the scrollable div down infinitely by expanding the container div infinitely. Is there a way to keep the scrollable div from expanding the containing div, or maybe including some settings so that we can eliminate the expansion by setting {container_expansion: false}?
This is a dynamically built site so the divs for both the scrolling div and the container div have variable heights depending on the page displayed. If you need an example just message me and I can send you a link.
Chrome v 13.0.782.215 does not seem to have this issue
I had the same issue, solved it by calculating and storing the parent container height before the 'sticky' topmargin is calculated.
Change to:
// Private
function location($element)
{
this.min = $element.offset().top;
this.originalMargin = parseInt($element.css("margin-top"), 10) || 0;
this.parentHeight = $element.parent().height(); // added
this.getMargin = function ($window)
{
var max = this.parentHeight - $element.outerHeight(); // amended
var margin = this.originalMargin;
We had another problem with unset height for the container div. The scrollable div was always to a negative marginTop value. We've added a new option to push a custom function for getting the parent height. In our case, we've created a function to compute the height of the dynamic container div. This is the new version
(function ($) {
// Public: jScroll Plugin
$.fn.jScroll = function (options) {
var opts = $.extend({}, $.fn.jScroll.defaults, options);
return this.each(function () {
var $element = $(this);
var $window = $(window);
var locator = new location($element);
$window.scroll(function () {
$element
.stop()
.animate(locator.getMargin($window), opts.speed);
});
});
// Private
function location($element) {
this.min = $element.offset().top;
this.originalMargin = parseInt($element.css("margin-top"), 10) || 0;
this.getMargin = function ($window) {
var max = opts.getParentHeight() - $element.outerHeight(); // CHANGED
var margin = this.originalMargin;
if ($window.scrollTop() >= this.min)
margin = margin + opts.top + $window.scrollTop() - this.min;
if (margin > max)
margin = max;
return ({ "marginTop": margin + 'px' });
}
}
};
// Public: Default values
$.fn.jScroll.defaults = {
speed: "slow",
top: 10,
getParentHeight: function () { $element.parent().height(); } // ADDED
};
})(jQuery);