remove window from scrolls
This commit is contained in:
parent
4d4a959162
commit
057a0b8a46
2 changed files with 37 additions and 37 deletions
|
@ -24,19 +24,19 @@ const exec = (operation) => {
|
||||||
type: messages.FIND_PREV,
|
type: messages.FIND_PREV,
|
||||||
}), '*');
|
}), '*');
|
||||||
case operations.SCROLL_VERTICALLY:
|
case operations.SCROLL_VERTICALLY:
|
||||||
return scrolls.scrollVertically(window, operation.count);
|
return scrolls.scrollVertically(operation.count);
|
||||||
case operations.SCROLL_HORIZONALLY:
|
case operations.SCROLL_HORIZONALLY:
|
||||||
return scrolls.scrollHorizonally(window, operation.count);
|
return scrolls.scrollHorizonally(operation.count);
|
||||||
case operations.SCROLL_PAGES:
|
case operations.SCROLL_PAGES:
|
||||||
return scrolls.scrollPages(window, operation.count);
|
return scrolls.scrollPages(operation.count);
|
||||||
case operations.SCROLL_TOP:
|
case operations.SCROLL_TOP:
|
||||||
return scrolls.scrollTop(window);
|
return scrolls.scrollTop();
|
||||||
case operations.SCROLL_BOTTOM:
|
case operations.SCROLL_BOTTOM:
|
||||||
return scrolls.scrollBottom(window);
|
return scrolls.scrollBottom();
|
||||||
case operations.SCROLL_HOME:
|
case operations.SCROLL_HOME:
|
||||||
return scrolls.scrollHome(window);
|
return scrolls.scrollHome();
|
||||||
case operations.SCROLL_END:
|
case operations.SCROLL_END:
|
||||||
return scrolls.scrollEnd(window);
|
return scrolls.scrollEnd();
|
||||||
case operations.FOLLOW_START:
|
case operations.FOLLOW_START:
|
||||||
return window.top.postMessage(JSON.stringify({
|
return window.top.postMessage(JSON.stringify({
|
||||||
type: messages.FOLLOW_START,
|
type: messages.FOLLOW_START,
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Reference in a new issue