Issues with scrollintoview javascript method in ie10.

Question

Hi,
scollintoview(false) javascript method causing the entire web page to shift to the left side of the window in ie10. Where as it is working perfectly fine in ie9.
Thanks in Advance.
Regards,
GopiChand

Answer 1

function scrollView() {
var d, y;
d = document.createElement("div");
d.style.position = ("fixed");
d.style.height = ("100%");
d.style.margin = ("0");
d = document.body.appendChild( d );
y = Math.floor( d.getBoundingClientRect().height );
if (!y) {y=d.clientHeight}; // for IE8
document.body.removeChild( d );
d = inPut;
y = ( d.offsetTop + d.offsetHeight - y );
while (d = d.offsetParent) { y += d.offsetTop };
if (y>0) { window.scrollTo(0,Math.ceil(y+1)) }; // add an extra pixel for IE, which randomly is short by 1
scrollView();
Here's a snippet from some working code that positions an element (button) named inPut to the bottom of the viewport.  The bottom of the inPut (button) aligns directly on the bottom of the window.
The majority of the code just finds the viewport size, by temporarily creating a fixed div.  (then removes it).  Next, the document offset to the button bottom is calculated,
minus viewport height.  That's the y coordinate which we ultimately place in the viewport upper left corner.  The only tricky thing is in the while loop, where the pixel offset from the button's top to its parent container is added,
iteratively, for each containing box.
In this example, only vertical scrolling happens.  The element stays at its natural horizontal position.  In the case where you want to retain the present horizontal tree offset of your element, just capture the present x offset and replace "0"
in the scrollTo.  Pretty easy mod.
Here are some links that explain the properties and methods used.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetTop
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetParent
https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollTo
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect
http://dev.w3.org/fxtf/geometry/#DOMRect
So, it's not pretty, but it's not so awful either.  Too bad, but the scrollIntoView() method is generally speaking useless due to its left-justification in the name of simplicity.