src/aria/utils/Dom.js
function (element, alignTop) {
            var document = element.ownerDocument;
            var origin = element, originRect = origin.getBoundingClientRect();
            var hasScroll = false;
            var documentScroll = this.getDocumentScrollElement(document);

            while (element) {

                if (element == document.body) {
                    element = documentScroll;
                } else {
                    element = element.parentNode;
                }

                if (element) {
                    var hasScrollbar = (!element.clientHeight) ? false : element.scrollHeight > element.clientHeight;

                    if (!hasScrollbar && element == documentScroll && documentScroll == document.body) {
                        var docElement = document.documentElement;
                        // On Chrome, documentScroll == document.body due to https://code.google.com/p/chromium/issues/detail?id=157855
                        // But if the body has no margin: document.body.scrollHeight == document.body.clientHeight
                        // and hasScrollbar can be false even if there is a scrollbar. That's why the following line was added:
                        hasScrollbar = (!docElement || !docElement.clientHeight) ? false : docElement.scrollHeight > docElement.clientHeight;
                    }

                    if (!hasScrollbar) {
                        if (element == documentScroll) {
                            element = null;
                        }
                        continue;
                    }

                    var rects;
                    if (element == documentScroll) {
                        rects = {
                            left : 0,
                            top : 0
                        };
                    } else {
                        rects = element.getBoundingClientRect();
                    }

                    // check that elementRect is in rects
                    var deltaLeft = originRect.left - (rects.left + (parseInt(element.style.borderLeftWidth, 10) | 0));
                    var deltaRight = originRect.right
                            - (rects.left + element.clientWidth + (parseInt(element.style.borderLeftWidth, 10) | 0));
                    var deltaTop = originRect.top - (rects.top + (parseInt(element.style.borderTopWidth, 10) | 0));
                    var deltaBottom = originRect.bottom
                            - (rects.top + element.clientHeight + (parseInt(element.style.borderTopWidth, 10) | 0));

                    // adjust display depending on deltas
                    if (deltaLeft < 0) {
                        element.scrollLeft += deltaLeft;
                    } else if (deltaRight > 0) {
                        element.scrollLeft += deltaRight;
                    }

                    if (alignTop === true && !hasScroll) {
                        element.scrollTop += deltaTop;
                    } else if (alignTop === false && !hasScroll) {
                        element.scrollTop += deltaBottom;
                    } else {
                        if (deltaTop < 0) {
                            element.scrollTop += deltaTop;
                        } else if (deltaBottom > 0) {
                            element.scrollTop += deltaBottom;
                        }
                    }

                    if (element == documentScroll) {
                        element = null;
                    } else {
                        // readjust element position after scrolls, and check if vertical scroll has changed.
                        // this is required to perform only one alignment
                        var nextRect = origin.getBoundingClientRect();
                        if (nextRect.top != originRect.top) {
                            hasScroll = true;
                        }
                        originRect = nextRect;
                    }
                }
            }
        }
function (element, alignTop) {
            var document = element.ownerDocument;
            var origin = element, originRect = origin.getBoundingClientRect();
            var hasScroll = false;
            var documentScroll = this.getDocumentScrollElement(document);

            while (element) {

                if (element == document.body) {
                    element = documentScroll;
                } else {
                    element = element.parentNode;
                }

                if (element) {
                    var hasScrollbar = (!element.clientHeight) ? false : element.scrollHeight > element.clientHeight;

                    if (!hasScrollbar && element == documentScroll && documentScroll == document.body) {
                        var docElement = document.documentElement;
                        // On Chrome, documentScroll == document.body due to https://code.google.com/p/chromium/issues/detail?id=157855
                        // But if the body has no margin: document.body.scrollHeight == document.body.clientHeight
                        // and hasScrollbar can be false even if there is a scrollbar. That's why the following line was added:
                        hasScrollbar = (!docElement || !docElement.clientHeight) ? false : docElement.scrollHeight > docElement.clientHeight;
                    }

                    if (!hasScrollbar) {
                        if (element == documentScroll) {
                            element = null;
                        }
                        continue;
                    }

                    var rects;
                    if (element == documentScroll) {
                        rects = {
                            left : 0,
                            top : 0
                        };
                    } else {
                        rects = element.getBoundingClientRect();
                    }

                    // check that elementRect is in rects
                    var deltaLeft = originRect.left - (rects.left + (parseInt(element.style.borderLeftWidth, 10) | 0));
                    var deltaRight = originRect.right
                            - (rects.left + element.clientWidth + (parseInt(element.style.borderLeftWidth, 10) | 0));
                    var deltaTop = originRect.top - (rects.top + (parseInt(element.style.borderTopWidth, 10) | 0));
                    var deltaBottom = originRect.bottom
                            - (rects.top + element.clientHeight + (parseInt(element.style.borderTopWidth, 10) | 0));

                    // adjust display depending on deltas
                    if (deltaLeft < 0) {
                        element.scrollLeft += deltaLeft;
                    } else if (deltaRight > 0) {
                        element.scrollLeft += deltaRight;
                    }

                    if (alignTop === true && !hasScroll) {
                        element.scrollTop += deltaTop;
                    } else if (alignTop === false && !hasScroll) {
                        element.scrollTop += deltaBottom;
                    } else {
                        if (deltaTop < 0) {
                            element.scrollTop += deltaTop;
                        } else if (deltaBottom > 0) {
                            element.scrollTop += deltaBottom;
                        }
                    }

                    if (element == documentScroll) {
                        element = null;
                    } else {
                        // readjust element position after scrolls, and check if vertical scroll has changed.
                        // this is required to perform only one alignment
                        var nextRect = origin.getBoundingClientRect();
                        if (nextRect.top != originRect.top) {
                            hasScroll = true;
                        }
                        originRect = nextRect;
                    }
                }
            }
        }
function ( element , alignTop ) { var document = element . ownerDocument ; var origin = element , originRect = origin . getBoundingClientRect ( ) ; var hasScroll = false ; var documentScroll = this . getDocumentScrollElement ( document ) ; while ( element ) { if ( element == document . body ) { element = documentScroll ; } else { element = element . parentNode ; } if ( element ) { var hasScrollbar = ( ! element . clientHeight ) ? false : element . scrollHeight > element . clientHeight ; if ( ! hasScrollbar && element == documentScroll && documentScroll == document . body ) { var docElement = document . documentElement ; // On Chrome, documentScroll == document.body due to https://code.google.com/p/chromium/issues/detail?id=157855 // But if the body has no margin: document.body.scrollHeight == document.body.clientHeight // and hasScrollbar can be false even if there is a scrollbar. That's why the following line was added: hasScrollbar = ( ! docElement || ! docElement . clientHeight ) ? false : docElement . scrollHeight > docElement . clientHeight ; } if ( ! hasScrollbar ) { if ( element == documentScroll ) { element = null ; } continue ; } var rects ; if ( element == documentScroll ) { rects = { left : 0 , top : 0 } ; } else { rects = element . getBoundingClientRect ( ) ; } // check that elementRect is in rects var deltaLeft = originRect . left - ( rects . left + ( parseInt ( element . style . borderLeftWidth , 10 ) | 0 ) ) ; var deltaRight = originRect . right - ( rects . left + element . clientWidth + ( parseInt ( element . style . borderLeftWidth , 10 ) | 0 ) ) ; var deltaTop = originRect . top - ( rects . top + ( parseInt ( element . style . borderTopWidth , 10 ) | 0 ) ) ; var deltaBottom = originRect . bottom - ( rects . top + element . clientHeight + ( parseInt ( element . style . borderTopWidth , 10 ) | 0 ) ) ; // adjust display depending on deltas if ( deltaLeft < 0 ) { element . scrollLeft += deltaLeft ; } else if ( deltaRight > 0 ) { element . scrollLeft += deltaRight ; } if ( alignTop === true && ! hasScroll ) { element . scrollTop += deltaTop ; } else if ( alignTop === false && ! hasScroll ) { element . scrollTop += deltaBottom ; } else { if ( deltaTop < 0 ) { element . scrollTop += deltaTop ; } else if ( deltaBottom > 0 ) { element . scrollTop += deltaBottom ; } } if ( element == documentScroll ) { element = null ; } else { // readjust element position after scrolls, and check if vertical scroll has changed. // this is required to perform only one alignment var nextRect = origin . getBoundingClientRect ( ) ; if ( nextRect . top != originRect . top ) { hasScroll = true ; } originRect = nextRect ; } } } }
Change scrollbar positions to ensure that an item is visible.
@param {HTMLElement} element element which is to be made visible
@param {Boolean} alignTop if true align top of the element with top of container. if false, align bottom. If
not specified, does "minimal job".
Change scrollbar positions to ensure that an item is visible .