|
|
@ -1,7 +1,7 @@ |
|
|
|
const SCROLL_DELTA_X = 48; |
|
|
|
const SCROLL_DELTA_X = 48; |
|
|
|
const SCROLL_DELTA_Y = 48; |
|
|
|
const SCROLL_DELTA_Y = 48; |
|
|
|
|
|
|
|
|
|
|
|
const isVisible = (win, element) => { |
|
|
|
const isVisible = (element) => { |
|
|
|
let rect = element.getBoundingClientRect(); |
|
|
|
let rect = element.getBoundingClientRect(); |
|
|
|
if (rect.width === 0 || rect.height === 0) { |
|
|
|
if (rect.width === 0 || rect.height === 0) { |
|
|
|
return false; |
|
|
|
return false; |
|
|
@ -9,19 +9,19 @@ const isVisible = (win, element) => { |
|
|
|
if (rect.right < 0 && rect.bottom < 0) { |
|
|
|
if (rect.right < 0 && rect.bottom < 0) { |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if (win.innerWidth < rect.left && win.innerHeight < rect.top) { |
|
|
|
if (window.innerWidth < rect.left && window.innerHeight < rect.top) { |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let { display, visibility } = win.getComputedStyle(element); |
|
|
|
let { display, visibility } = window.getComputedStyle(element); |
|
|
|
if (display === 'none' || visibility === 'hidden') { |
|
|
|
if (display === 'none' || visibility === 'hidden') { |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
return true; |
|
|
|
return true; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const isScrollableStyle = (win, element) => { |
|
|
|
const isScrollableStyle = (element) => { |
|
|
|
let { overflowX, overflowY } = win.getComputedStyle(element); |
|
|
|
let { overflowX, overflowY } = window.getComputedStyle(element); |
|
|
|
return !(overflowX !== 'scroll' && overflowX !== 'auto' && |
|
|
|
return !(overflowX !== 'scroll' && overflowX !== 'auto' && |
|
|
|
overflowY !== 'scroll' && overflowY !== 'auto'); |
|
|
|
overflowY !== 'scroll' && overflowY !== 'auto'); |
|
|
|
}; |
|
|
|
}; |
|
|
@ -35,15 +35,15 @@ const isOverflowed = (element) => { |
|
|
|
// this method is called by each scrolling, and the returned value of this
|
|
|
|
// this method is called by each scrolling, and the returned value of this
|
|
|
|
// method is not cached. That does not cause performance issue because in the
|
|
|
|
// method is not cached. That does not cause performance issue because in the
|
|
|
|
// most pages, the window is root element i,e, documentElement.
|
|
|
|
// most pages, the window is root element i,e, documentElement.
|
|
|
|
const findScrollable = (win, element) => { |
|
|
|
const findScrollable = (element) => { |
|
|
|
if (isScrollableStyle(win, element) && isOverflowed(element)) { |
|
|
|
if (isScrollableStyle(element) && isOverflowed(element)) { |
|
|
|
return element; |
|
|
|
return element; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let children = Array.prototype |
|
|
|
let children = Array.prototype |
|
|
|
.filter.call(element.children, e => isVisible(win, e)); |
|
|
|
.filter.call(element.children, e => isVisible(e)); |
|
|
|
for (let child of children) { |
|
|
|
for (let child of children) { |
|
|
|
let scrollable = findScrollable(win, child); |
|
|
|
let scrollable = findScrollable(child); |
|
|
|
if (scrollable) { |
|
|
|
if (scrollable) { |
|
|
|
return scrollable; |
|
|
|
return scrollable; |
|
|
|
} |
|
|
|
} |
|
|
@ -51,65 +51,65 @@ const findScrollable = (win, element) => { |
|
|
|
return null; |
|
|
|
return null; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollTarget = (win) => { |
|
|
|
const scrollTarget = () => { |
|
|
|
if (isOverflowed(win.document.documentElement)) { |
|
|
|
if (isOverflowed(window.document.documentElement)) { |
|
|
|
return win.document.documentElement; |
|
|
|
return window.document.documentElement; |
|
|
|
} |
|
|
|
} |
|
|
|
if (isOverflowed(win.document.body)) { |
|
|
|
if (isOverflowed(window.document.body)) { |
|
|
|
return win.document.body; |
|
|
|
return window.document.body; |
|
|
|
} |
|
|
|
} |
|
|
|
let target = findScrollable(win, win.document.documentElement); |
|
|
|
let target = findScrollable(window.document.documentElement); |
|
|
|
if (target) { |
|
|
|
if (target) { |
|
|
|
return target; |
|
|
|
return target; |
|
|
|
} |
|
|
|
} |
|
|
|
return win.document.documentElement; |
|
|
|
return window.document.documentElement; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollVertically = (win, count) => { |
|
|
|
const scrollVertically = (count) => { |
|
|
|
let target = scrollTarget(win); |
|
|
|
let target = scrollTarget(); |
|
|
|
let x = target.scrollLeft; |
|
|
|
let x = target.scrollLeft; |
|
|
|
let y = target.scrollTop + SCROLL_DELTA_Y * count; |
|
|
|
let y = target.scrollTop + SCROLL_DELTA_Y * count; |
|
|
|
target.scrollTo(x, y); |
|
|
|
target.scrollTo(x, y); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollHorizonally = (win, count) => { |
|
|
|
const scrollHorizonally = (count) => { |
|
|
|
let target = scrollTarget(win); |
|
|
|
let target = scrollTarget(); |
|
|
|
let x = target.scrollLeft + SCROLL_DELTA_X * count; |
|
|
|
let x = target.scrollLeft + SCROLL_DELTA_X * count; |
|
|
|
let y = target.scrollTop; |
|
|
|
let y = target.scrollTop; |
|
|
|
target.scrollTo(x, y); |
|
|
|
target.scrollTo(x, y); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollPages = (win, count) => { |
|
|
|
const scrollPages = (count) => { |
|
|
|
let target = scrollTarget(win); |
|
|
|
let target = scrollTarget(); |
|
|
|
let height = target.clientHeight; |
|
|
|
let height = target.clientHeight; |
|
|
|
let x = target.scrollLeft; |
|
|
|
let x = target.scrollLeft; |
|
|
|
let y = target.scrollTop + height * count; |
|
|
|
let y = target.scrollTop + height * count; |
|
|
|
target.scrollTo(x, y); |
|
|
|
target.scrollTo(x, y); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollTop = (win) => { |
|
|
|
const scrollTop = () => { |
|
|
|
let target = scrollTarget(win); |
|
|
|
let target = scrollTarget(); |
|
|
|
let x = target.scrollLeft; |
|
|
|
let x = target.scrollLeft; |
|
|
|
let y = 0; |
|
|
|
let y = 0; |
|
|
|
target.scrollTo(x, y); |
|
|
|
target.scrollTo(x, y); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollBottom = (win) => { |
|
|
|
const scrollBottom = () => { |
|
|
|
let target = scrollTarget(win); |
|
|
|
let target = scrollTarget(); |
|
|
|
let x = target.scrollLeft; |
|
|
|
let x = target.scrollLeft; |
|
|
|
let y = target.scrollHeight; |
|
|
|
let y = target.scrollHeight; |
|
|
|
target.scrollTo(x, y); |
|
|
|
target.scrollTo(x, y); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollHome = (win) => { |
|
|
|
const scrollHome = () => { |
|
|
|
let target = scrollTarget(win); |
|
|
|
let target = scrollTarget(); |
|
|
|
let x = 0; |
|
|
|
let x = 0; |
|
|
|
let y = target.scrollTop; |
|
|
|
let y = target.scrollTop; |
|
|
|
target.scrollTo(x, y); |
|
|
|
target.scrollTo(x, y); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const scrollEnd = (win) => { |
|
|
|
const scrollEnd = () => { |
|
|
|
let target = scrollTarget(win); |
|
|
|
let target = scrollTarget(); |
|
|
|
let x = target.scrollWidth; |
|
|
|
let x = target.scrollWidth; |
|
|
|
let y = target.scrollTop; |
|
|
|
let y = target.scrollTop; |
|
|
|
target.scrollTo(x, y); |
|
|
|
target.scrollTo(x, y); |
|
|
|