Feature Request: Add padding to scroll parent (Implemented Already)

[steeltkb]

I wanted to be able to pretend like the "visible client area" of the scroll parent was smaller than what was actually visible, effectively adding a sort of "padding" so that the item you're scrolling to can be placed away from the edges of the screen/scroll parent.

To enable this, I added another parameter that is passed in the "options" object called "padding". It is a JSON object having 4 parameters that represent pixel values for padding. They are named "T, B, L, R" for top, bottom, left, right. All params are set to 0 by default, which would not change the default behavior.

Usage:

\\ this would cause the item to be scrolled to 200 pixels below the top of the scroll 
\\ parent's visible area, or 300 pixels above the bottom edge of the visible area:
$("#element_id").scrollintoview( {padding:{T:200, B:300}} );

In my case, I needed this because I was using the YUI AutoComplete widget on a dynamically-generated "spreadsheet" type form, and the autocomplete suggestions were displaying off the bottom of the screen for the lower rows. Using this "padding" modification with a bottom padding of 200 (pixels), I am able to ensure that the item is always scrolled up at least 200 pixels from the bottom of the screen so that I can effectively use the autocomplete suggestions without any manual scrolling.

Hopefully this may be of use to others. Thanks so much for this useful plugin!

Old Line 21:

var settings = {
    duration: "fast",
    direction: "both",
    padding: {L:0, R:0, T:0, B:0}
};

Old Line 103 - subtract "options.padding.T" etc... from each dimension:

var rel = {
    top: dim.e.rect.top - (dim.s.rect.top + dim.s.border.top) - options.padding.T,
    bottom: dim.s.rect.bottom - dim.s.border.bottom - dim.s.scrollbar.bottom - dim.e.rect.bottom - options.padding.B,
    left: dim.e.rect.left - (dim.s.rect.left + dim.s.border.left) - options.padding.L,
    right: dim.s.rect.right - dim.s.border.right - dim.s.scrollbar.right - dim.e.rect.right - options.padding.R
};

[AndyB37]

Tremendous plugin and extremely well thought out. I had written the code to do this myself in a couple of places before realizing that somebody had probably made a JQuery plugin. I found two and yours is by far the most helpful and user friendly. My favorite features are this padding option (which I was hard coding into my own code and was thrilled to see incorporated here) and the fact that it automatically checks for the closest :scrollable.

[darkin1]

+1 :)

[rsteinwand]

Perfect! Just what I was looking for.