gistfile1.html

<div style="overflow:scroll" id="scrollableElement">
	<div>This item is in view</div>
	<div id="itemToScrollTo" tabindex="-1">This item is out of view</div>
</div>

<!--
	document.getElementById('itemToScrollTo').scrollIntoView();
	
	The above will scroll not only scrollableElement, but also the viewport. It
	will scroll both elements as much as it can to attempt to bring itemToScrollTo
	to the top of the viewport.
	
	Instead I'm looking to scroll each scrollable element & the window a minimum
	amount to bring itemToScrollTo into view. This may result in both scrollableElement
	and the viewport scrolling, just one of the two, or neither.
	
	Basically, it needs to start at the viewport and work down to itemToScrollTo,
	scrolling each scrollable element so the child scrollable element (or target item)
	is entirely in view, using the minimum amount of scrolling.
	
	Sounds complicated, but this can be done via:
	
	document.getElementById('itemToScrollTo').focus();
	
	However, is there a way to do it without focusing?
-->