open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix/simplify scrollElementIntoView

Browse Source
This commit is contained in:
tophf 2022-01-28 16:45:03 +03:00
parent 27c713e11e
commit 5838779ff2
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
injection-order/injection-order.js
View File

@ -43,7 +43,7 @@ async function InjectionOrder(show = true) {
function makeList([type, styles]) {
const ids = groups[type] = styles.map(s => s._id);
const ol = ols[type] = $create('ol');
const ol = ols[type] = $create('ol.scroller');
let maxTranslateY;
ol.append(...styles.map(makeEntry));
ol.on('d:dragstart', ({detail: d}) => {

14
js/dom.js
View File

@ -278,16 +278,22 @@ function onDOMready() {
: new Promise(resolve => document.on('DOMContentLoaded', resolve, {once: true}));
}
/**
* Scrolls `window` or the closest parent with `class="scroller"` if the element is not visible,
* centering the element in the view
* @param {HTMLElement} element
* @param {number} [invalidMarginRatio] - for example, 0.10 will center the element if it's in the top/bottom 10% of the scroller
*/
function scrollElementIntoView(element, {invalidMarginRatio = 0} = {}) {
// align to the top/bottom of the visible area if wasn't visible
const parent = element.parentNode;
if (!parent) return;
if (!element.parentNode) return;
const {top, height} = element.getBoundingClientRect();
const {top: parentTop, bottom: parentBottom} = parent.getBoundingClientRect();
const {top: parentTop, bottom: parentBottom} = element.parentNode.getBoundingClientRect();
const windowHeight = window.innerHeight;
if (top < Math.max(parentTop, windowHeight * invalidMarginRatio) ||
top > Math.min(parentBottom, windowHeight) - height - windowHeight * invalidMarginRatio) {
parent.scrollBy(0, top - windowHeight / 2 + height);
const scroller = element.closest('.scroller');
scroller.scrollBy(0, top - (scroller ? scroller.clientHeight : windowHeight) / 2 + height);
}
}