Feature request: outline as an option to the function

[kachkaev]

It would be nice if one could pass an outline parameter to the function, containing minimum distance between the element and its scrollable parent border.

// If possible, $target will be scrolled so,
//   that there will be at least 10px around it's border visible for a user
$target.scrollintoview({
    outline : 10
});

// Different values for different sides
$target.scrollintoview({
    outline : {top: 10, right: 15, bottom: 5, left: 15}
});

[litera]

This has been brought to my attention in the past already (not here but on my blog) but we decided that poster of the request would be better off using the .scrollTo() plugin that allows for such options.

Since this is the second time this was requested I will take it into consideration. But I'm sure it shouldn't be called outline because this has a completely different meaning in web development to what it would be used here. It should rather be called something like scrollOffset or similar.

[kachkaev]

OK, good. I agree that scrollOffset is a better name to call what I tried to explain.

But anyway, this feature seems very useful in many cases.

[litera]

The main issue about this option is inconsistency. Some other user suggested that scrolling of an element should always scroll the element to the top of the screen. I insisted on keeping it scrolled into view as close into viewport as possible. This makes scrolling 100% consistent. That's why below the view elements will always scroll to the bottom and above the view elements to top. But they will get into view nonetheless. And consistently so.

You see the problem with offset is somehow similar because it can't be assured that elements will always have the offset when scrolled into view. If the element is at the very top (or very bottom) of the page the page itself won't be able to scroll over to the amount of set offset. This would look as if plugin sometimes works and sometimes it doesn't... Inconsistency.

I'm trying to avoid such circumstances to avoid unnecessary issues with this plugin. Hence I considered this but won't implement until further notice until I can come up with some sort of consistency about it.

[kachkaev]

I don't see a problem here. If you call the option something like recommendedScrollOffset or just recommendedOffset, it will be clear for the developers that the offset will be achieved only if possible. But the feature itself is really useful, because basically scrolling the object into view is done for focusing user attention on it in 99% cases, and keeping the target with no gap between it and, let's say, browser border is really bad. The only workaround that can be used now is padding, but it is not a solution in all cases.

[steeltkb]

I implemented this, and called it "padding". I didn't notice your thread till after I already opened mine, as you'd written "outline". You can use this code to do what you're looking for I think. There are only 2 little sections you need to change in the code to enable this:

https://github.com/litera/jquery-scrollintoview/issues/9

P.S> if you want it to always work consistently, you'd need to make sure that your item can always physically scroll to the area specified. For items at the very bottom of the page, if you want them to be able to scroll up off the bottom, then you'd need to add an invisible "spacer" DIV after your last page items that would need to be at least as high as the padding you're using. Doing this allows the item to scroll up to the location required, and then my code modifications allow it to scroll there automatically.

This could probably be done automatically by programatically attaching absolutely-positioned DIVs having the widths / heights equal to the required padding to each side of the target object. This would always ensure that the item was able to scroll "that much further." For me, though, I just designed my page so that it would always be able to scroll to the areas that I asked it to.