55 lines
2.4 KiB
JavaScript
55 lines
2.4 KiB
JavaScript
// Mac-like scrollbars: a scrolled element shows its thin scrollbar, and so
|
|
// does one whose edge the pointer is at; after a second at rest it fades out.
|
|
// Elements with nothing to scroll never show one. The look is in app.css.
|
|
(function () {
|
|
'use strict';
|
|
var live = new Map(); // element -> {v: shown 0..1, until: ms to stay}
|
|
var raf = 0;
|
|
function el(t) { return t === document || t === window ? document.documentElement : t; }
|
|
function scrollable(e) {
|
|
return e.scrollHeight > e.clientHeight + 1 || e.scrollWidth > e.clientWidth + 1;
|
|
}
|
|
function show(e, ms) {
|
|
if (!e || !e.style || !scrollable(e)) return;
|
|
var s = live.get(e) || {v: 0, until: 0};
|
|
s.until = Math.max(s.until, performance.now() + ms);
|
|
live.set(e, s);
|
|
if (!raf) raf = setTimeout(tick, 16);
|
|
}
|
|
var last = 0;
|
|
// A timer, not animation frames: those stop in a tab out of sight, and the
|
|
// bar would stay shown.
|
|
function tick() {
|
|
var now = performance.now();
|
|
var dt = Math.min(64, now - (last || now - 16));
|
|
last = now;
|
|
live.forEach(function (s, e) {
|
|
// In fast (about 0.12 s), out slowly (about 0.4 s).
|
|
var want = now < s.until ? 1 : 0;
|
|
s.v = want ? Math.min(1, s.v + dt / 120) : Math.max(0, s.v - dt / 400);
|
|
e.style.setProperty('--sb', s.v.toFixed(3));
|
|
if (!want && s.v === 0) { e.style.removeProperty('--sb'); live.delete(e); }
|
|
});
|
|
raf = live.size ? setTimeout(tick, 16) : 0;
|
|
if (!raf) last = 0;
|
|
}
|
|
document.addEventListener('scroll', function (ev) { show(el(ev.target), 900); }, {capture: true, passive: true});
|
|
// The pointer at a scrollable element's right or bottom edge shows its bar.
|
|
var moved = null;
|
|
document.addEventListener('pointermove', function (ev) {
|
|
if (ev.pointerType !== 'mouse') return;
|
|
if (!moved) requestAnimationFrame(function () {
|
|
var m = moved; moved = null;
|
|
for (var e = m.target; e && e.nodeType === 1; e = e.parentElement) {
|
|
if (!scrollable(e)) continue;
|
|
var st = getComputedStyle(e);
|
|
if (!/(auto|scroll)/.test(st.overflowY + st.overflowX) && e !== document.documentElement) continue;
|
|
var r = e === document.documentElement ? {right: innerWidth, bottom: innerHeight} : e.getBoundingClientRect();
|
|
if (m.x >= r.right - 14 || m.y >= r.bottom - 14) show(e, 700);
|
|
break;
|
|
}
|
|
});
|
|
moved = {target: ev.target, x: ev.clientX, y: ev.clientY};
|
|
}, {passive: true});
|
|
})();
|