clean scrolls

jh-changes
Shin'ya Ueoka 7 years ago
parent 2ca1b54faa
commit 8fea1e5cd2
  1. 89
      src/content/scrolls.js

@ -66,68 +66,81 @@ const scrollTarget = () => {
return window.document.documentElement; return window.document.documentElement;
}; };
const easing = (t) => { class SmoothScroller {
if (t < 1) { constructor(element) {
return t * t; this.element = element;
} }
return -(t - 1) * (t - 1) + 1;
};
const smoothScroll = (element, x, y) => { scroll(x, y) {
this.startX = this.element.scrollLeft;
this.startY = this.element.scrollTop;
let startX = element.scrollTop; this.targetX = x;
let startY = element.scrollTop; this.targetY = y;
this.distanceX = x - this.startX;
this.distanceY = y - this.startY;
this.timeStart = 0;
let distanceX = x - startX; window.requestAnimationFrame(this.loop.bind(this));
let distanceY = y - startY; }
let timeStart = 0;
const loop = (timeCurrent) => { loop(time) {
if (!timeStart) { if (!this.timeStart) {
timeStart = timeCurrent; this.timeStart = time;
} }
let timeElapsed = timeCurrent - timeStart; let elapsed = time - this.timeStart;
let t = timeElapsed / SMOOTH_SCROLL_DURATION; let v = this.easing(elapsed / SMOOTH_SCROLL_DURATION);
let nextX = startX + distanceX * easing(t); let nextX = this.startX + this.distanceX * v;
let nextY = startY + distanceY * easing(t); let nextY = this.startY + this.distanceY * v;
window.scrollTo(nextX, nextY); window.scrollTo(nextX, nextY);
if (timeElapsed < SMOOTH_SCROLL_DURATION) { if (elapsed < SMOOTH_SCROLL_DURATION) {
window.requestAnimationFrame(loop); window.requestAnimationFrame(this.loop.bind(this));
} else { } else {
element.scrollTo(x, y); this.element.scrollTo(this.targetX, this.targetY);
} }
}; }
window.requestAnimationFrame(loop); // in-out quad easing
}; easing(t) {
if (t < 1) {
return t * t;
}
return -(t - 1) * (t - 1) + 1;
}
}
const roughScroll = (element, x, y) => { class RoughtScroller {
element.scrollTo(x, y); constructor(element) {
}; this.element = element;
}
scroll(x, y) {
this.element.scrollTo(x, y);
}
}
const scroll = (element, x, y, smooth) => { const scroller = (element, smooth) => {
if (smooth) { if (smooth) {
smoothScroll(element, x, y); return new SmoothScroller(element);
} else {
roughScroll(element, x, y);
} }
return new RoughtScroller(element);
}; };
const scrollVertically = (count, smooth) => { const scrollVertically = (count, smooth) => {
let target = scrollTarget(); 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;
scroll(target, x, y, smooth); scroller(target, smooth).scroll(x, y);
}; };
const scrollHorizonally = (count, smooth) => { const scrollHorizonally = (count, smooth) => {
let target = scrollTarget(); 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;
scroll(target, x, y, smooth); scroller(target, smooth).scroll(x, y);
}; };
const scrollPages = (count, smooth) => { const scrollPages = (count, smooth) => {
@ -135,35 +148,35 @@ const scrollPages = (count, smooth) => {
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;
scroll(target, x, y, smooth); scroller(target, smooth).scroll(x, y);
}; };
const scrollTop = (smooth) => { const scrollTop = (smooth) => {
let target = scrollTarget(); let target = scrollTarget();
let x = target.scrollLeft; let x = target.scrollLeft;
let y = 0; let y = 0;
scroll(target, x, y, smooth); scroller(target, smooth).scroll(x, y);
}; };
const scrollBottom = (smooth) => { const scrollBottom = (smooth) => {
let target = scrollTarget(); let target = scrollTarget();
let x = target.scrollLeft; let x = target.scrollLeft;
let y = target.scrollHeight; let y = target.scrollHeight;
scroll(target, x, y, smooth); scroller(target, smooth).scroll(x, y);
}; };
const scrollHome = (smooth) => { const scrollHome = (smooth) => {
let target = scrollTarget(); let target = scrollTarget();
let x = 0; let x = 0;
let y = target.scrollTop; let y = target.scrollTop;
scroll(target, x, y, smooth); scroller(target, smooth).scroll(x, y);
}; };
const scrollEnd = (smooth) => { const scrollEnd = (smooth) => {
let target = scrollTarget(); let target = scrollTarget();
let x = target.scrollWidth; let x = target.scrollWidth;
let y = target.scrollTop; let y = target.scrollTop;
scroll(target, x, y, smooth); scroller(target, smooth).scroll(x, y);
}; };
export { export {