none
issues with scrollintoview javascript method in ie10. RRS feed

  • 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

    Tuesday, December 31, 2013 12:08 PM

Answers

All replies

  • Will it happen on certain pages?

    Have you tried to use the Compatibility View?

    http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/features/compatibility-view

    Wednesday, January 1, 2014 9:43 AM
  • Hi,

    Please include links to any website you are having issues with when posting a question to a Web browser forum....

    Some websites use adaptive layouts that have a horizontal layout for web browsers that support gestures or touch events. (eg myspace.com) and navigation is thought to occur on swipe guestures.

    They may use a different vertical layout for earlier versions of browsers or they may be incorrectly detecting the browser version.


    Rob^_^

    Friday, January 3, 2014 12:46 AM
  • Hi GopiChand,

    T. Kujala's suggestion is worth to try.

    In addition, you may check the CSS related to scollintoview method.

    It should be CSS compatible issue:

    CSS Compatibility in Internet Explorer

    http://msdn.microsoft.com/en-us/library/ie/hh781508(v=vs.85).aspx

    Meanwhile, I would suggest you to post the same question in Microsoft MSDN IE Development Forums for further assistance.

    As IE development forum focuses on questions about web development including HTML, CSS and Script for Internet Explorer, your issue can be fixed efficiently.

    http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads

    Thank you for understanding.

    Regards,

    Blair Deng


    Blair Deng
    TechNet Community Support

    Friday, January 3, 2014 1:44 AM
    Moderator
  • This is NOT an answer.

    >>>T. Kujala's suggestion is worth to try.     ?????

    Where is the suggestion?

    What about the first link helps? Why is marked as an answer?

    This is a big issue for me. The same code works fine in Mozilla (treeview scrolls vertically--not horizontally), but scrolls vertically AND horizontally for inner nodes in IE9-11.

    Code: for Radtreeview event OnClientNodeAnimationEnd (Telerik says it's a bug in IE)

    function animationEnd(sender, args) {
        treeview = gettree();
        var treeViewElement = treeview.get_element();
        var selectedNode = sender.get_selectedNode();
        if (selectedNode) {
            var nodeElement = selectedNode.get_element();
             nodeElement.scrollIntoView(true);
        }
    }

    Monday, July 14, 2014 8:21 PM
  • This is NOT an answer.

    >>>T. Kujala's suggestion is worth to try.     ?????

    Where is the suggestion?

    What about the first link helps? Why is marked as an answer?

    This is a big issue for me. The same code works fine in Mozilla (treeview scrolls vertically--not horizontally), but scrolls vertically AND horizontally for inner nodes in IE9-11.

    Code: for Radtreeview event OnClientNodeAnimationEnd (Telerik says it's a bug in IE)

    function animationEnd(sender, args) {
        treeview = gettree();
        var treeViewElement = treeview.get_element();
        var selectedNode = sender.get_selectedNode();
        if (selectedNode) {
            var nodeElement = selectedNode.get_element();
             nodeElement.scrollIntoView(true);
        }
    }

    Post questions about html, css and scripting to the IE Web Development forum.

    Please Include with your question a link to your website or a mashup that shows the issue.

    MSDN scrollIntoView Method

    MDN element.scrollIntoView

    MSDN animationend Event

    if the DOM tree has not completed by the time the animation ends an error should be raised.


    Rob^_^

    Tuesday, July 15, 2014 2:43 AM
  • Here is very recent thread already.  On this exact topic.  On msdn IE Web Development forum.

     

    http://social.msdn.microsoft.com/Forums/en-US/c4bf1d68-8bd1-47e8-bd31-e2a4be6e6868/scrollintoview-method-causing-issues-in-ie10

    Tuesday, July 15, 2014 3:04 AM
  • Thanks. I hadn't realized I was in the wrong forum since the search engine led me to what appeared as a match to my issue. It also looked like an answer that was alluding to a suggestion (T. Kujala's) that was not in the thread, which is frustrating.

    Thanks, thumbdown, for making the extra effort to be helpful. If what the link says is true, then Mozilla and IE are at odds (for a change), but maybe I can do something with it.

    Mike

    Tuesday, July 15, 2014 1:45 PM
  • Different implementations based on interpretation of:

    "Visual user agents should further scroll horizontally as necessary to bring the element to the attention of the user."

    seems to be the problem.

    I'm dealing with a load-on-demand Telerick treeview control with 4 levels of children where leaf nodes are all chemical names, that can be quite long. The tree is inside a <div> that is wide enough so that parent nodes can and should be visible. However when nodes with long chemical names are scrolled (using ScrollIntoView()) to, the end of the name gets clipped in the Mozilla implementation (fine because tooltip displays full text), but the entire tree is shifted left in IE which hides parent nodes.

    I have attempted to create a listener to detect the horizontal shift, and then use ScrollTo() to readjust, but nothing fires when the horizontal shift takes place. The selected node is usually far below the visible area so I would have to determine it's coordinates before bringing it into the div's visible area.

    Thanks again

    ( I don't know what this "abuse" stuff means, but you've been really helpful)

    Mike

    Tuesday, July 15, 2014 6:09 PM
  • 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.

     

     

    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.

    Tuesday, July 15, 2014 8:04 PM
  • Thanks thumbdown,

    I appreciate the snippet, and would have tried it out had I not found a simpler way after utilizing the VS debugger to look at the node properties, http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div, and http://help.dottoro.com/ljnvukbb.php

    Each tree view node has the property "offsetTop" (as you utilized in your generic code).

    Only had to change a couple of lines of code:

    FROM:
     var selectedNode = sender.get_selectedNode();
        if (selectedNode) {
            var nodeElement = selectedNode.get_element();
             nodeElement.scrollIntoView(true);//Problem with IE
        }

    TO:
       var selectedNode = sender.get_selectedNode();
        if (selectedNode) {
            var nodeElement = selectedNode.get_element();
            var objDiv = document.getElementById("left1");//Div containing the tree control
            objDiv.scrollTop = nodeElement.offsetTop; //scrolls node to top of Div
        }

    This alteration produces no horizontal scrolling in IE8-11 and works with other browsers.

    Don't have a VM with earlier IE versions, but I'm not really concerned about it.

    Thanks again,

    Mike

    Wednesday, July 16, 2014 2:19 PM
  • Good idea.

    That scrollTop applies to scrolling the content of a block (box) that already has a scrollbar.  The trick shown there (at S.O.) is to put a value too large (the whole scrollHeight), knowing this value will get clamped down to the max possible value.  Then the bottom element in the block scrolls up, seated flush on the bottom border of the block.

    Here's a demo I practiced with.  Just one line of actual script.  Thanks.

    https://googledrive.com/host/0B8BLd2qPPV7XaXkxMHZGWFFLelU

    Friday, July 18, 2014 9:15 AM
  • I added a second button, to compare scrollTop=max to the scrollIntoView() method.

    With Firefox and Chrome, the demo's bluebox shifts horizontally only if it needs to.  That is, only if vertical scrolling alone would fail to bring the bluebox into view, because it is too far left (or right).  Then, in addition to being scrolled vertically, the bluebox is positioned against the left (or right) margin where it is now visible.

    With IE11, the bluebox is always shifted to the left margin with [scrollIntoView] no matter what.

    That's the difference.

     

    https://googledrive.com/host/0B8BLd2qPPV7XS3JUSGZRYmdleVk

    Friday, July 25, 2014 10:08 PM