axe-core/lib/core/utils/scroll-state.js

Accessibility engine for automated Web UI testing

/**
 * Return the scroll position of scrollable elements
 */
function getScroll (elm) {
	const style = window.getComputedStyle(elm);
	const visibleOverflowY = style.getPropertyValue('overflow-y') === 'visible';
	const visibleOverflowX = style.getPropertyValue('overflow-x') === 'visible';

	if (// See if the element hides overflowing content
		(!visibleOverflowY && elm.scrollHeight > elm.clientHeight) ||
		(!visibleOverflowX && elm.scrollWidth > elm.clientWidth)
	) {
		return { elm, top: elm.scrollTop, left: elm.scrollLeft };
	}
}

/**
 * set the scroll position of an element
 */
function setScroll (elm, top, left) {
	if (elm === window) {
		return elm.scroll(top, left);
	} else {
		elm.scrollTop = top;
		elm.scrollLeft = left;
	}
}

/**
 * Create an array scroll positions from descending elements
 */
function getElmScrollRecursive (root) {
	return Array.from(root.children).reduce((scrolls, elm) => {
		const scroll = getScroll(elm);
		if (scroll) {
			scrolls.push(scroll);
		}
		return scrolls.concat(getElmScrollRecursive(elm));
	}, []);
}

/**
 * Get the scroll position of all scrollable elements in a page
 */
axe.utils.getScrollState = function getScrollState (win = window) {
	const root = win.document.documentElement;
	const windowScroll = [(win.pageXOffset !== undefined ? {
		elm: win,
		top: win.pageYOffset,
		left: win.pageXOffset
	} : {
		elm: root,
		top: root.scrollTop,
		left: root.scrollLeft
	})];

	return windowScroll.concat(
		getElmScrollRecursive(document.body)
	);
};

/**
 * set the scroll position of all items in the scrollState array
 */
axe.utils.setScrollState = function setScrollState (scrollState) {
	scrollState.forEach(
		({ elm, top, left }) => setScroll(elm, top, left)
	);
};