Clean scroller
This commit is contained in:
parent
514f91f8dc
commit
7bdecfdb34
1 changed files with 40 additions and 28 deletions
|
@ -55,17 +55,39 @@ const resetScrolling = () => {
|
|||
scrolling = false;
|
||||
};
|
||||
|
||||
class SmoothScroller {
|
||||
constructor(element) {
|
||||
class Scroller {
|
||||
constructor(element, smooth) {
|
||||
this.element = element;
|
||||
this.smooth = smooth;
|
||||
}
|
||||
|
||||
scroll(x, y) {
|
||||
scrollTo(x, y) {
|
||||
let behavior = this.smooth ? 'smooth' : 'auto';
|
||||
window.scrollTo({
|
||||
left: x,
|
||||
top: y,
|
||||
behavior: 'smooth',
|
||||
behavior: behavior,
|
||||
});
|
||||
if (!this.smooth) {
|
||||
return;
|
||||
}
|
||||
this.prepareReset();
|
||||
}
|
||||
|
||||
scrollBy(x, y) {
|
||||
let behavior = this.smooth ? 'smooth' : 'auto';
|
||||
window.scrollBy({
|
||||
left: x,
|
||||
top: y,
|
||||
behavior: behavior,
|
||||
});
|
||||
if (!this.smooth) {
|
||||
return;
|
||||
}
|
||||
this.prepareReset();
|
||||
}
|
||||
|
||||
prepareReset() {
|
||||
scrolling = true;
|
||||
if (lastTimeoutId) {
|
||||
clearTimeout(lastTimeoutId);
|
||||
|
@ -85,13 +107,6 @@ class RoughtScroller {
|
|||
}
|
||||
}
|
||||
|
||||
const scroller = (element, smooth) => {
|
||||
if (smooth) {
|
||||
return new SmoothScroller(element);
|
||||
}
|
||||
return new RoughtScroller(element);
|
||||
};
|
||||
|
||||
const getScroll = () => {
|
||||
let target = scrollTarget();
|
||||
return { x: target.scrollLeft, y: target.scrollTop };
|
||||
|
@ -99,66 +114,63 @@ const getScroll = () => {
|
|||
|
||||
const scrollVertically = (count, smooth) => {
|
||||
let target = scrollTarget();
|
||||
let x = target.scrollLeft;
|
||||
let y = target.scrollTop + SCROLL_DELTA_Y * count;
|
||||
let delta = SCROLL_DELTA_Y * count;
|
||||
if (scrolling) {
|
||||
y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
|
||||
delta = SCROLL_DELTA_Y * count * 4;
|
||||
}
|
||||
scroller(target, smooth).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollBy(0, delta);
|
||||
};
|
||||
|
||||
const scrollHorizonally = (count, smooth) => {
|
||||
let target = scrollTarget();
|
||||
let x = target.scrollLeft + SCROLL_DELTA_X * count;
|
||||
let y = target.scrollTop;
|
||||
let delta = SCROLL_DELTA_X * count;
|
||||
if (scrolling) {
|
||||
y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
|
||||
delta = SCROLL_DELTA_X * count * 4;
|
||||
}
|
||||
scroller(target, smooth).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollBy(delta, 0);
|
||||
};
|
||||
|
||||
const scrollPages = (count, smooth) => {
|
||||
let target = scrollTarget();
|
||||
let height = target.clientHeight;
|
||||
let x = target.scrollLeft;
|
||||
let y = target.scrollTop + height * count;
|
||||
let delta = height * count;
|
||||
if (scrolling) {
|
||||
y = target.scrollTop + height * count * 4;
|
||||
delta = height * count;
|
||||
}
|
||||
scroller(target, smooth).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollBy(0, delta);
|
||||
};
|
||||
|
||||
const scrollTo = (x, y, smooth) => {
|
||||
let target = scrollTarget();
|
||||
scroller(target, smooth, false).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollTo(x, y);
|
||||
};
|
||||
|
||||
const scrollToTop = (smooth) => {
|
||||
let target = scrollTarget();
|
||||
let x = target.scrollLeft;
|
||||
let y = 0;
|
||||
scroller(target, smooth, false).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollTo(x, y);
|
||||
};
|
||||
|
||||
const scrollToBottom = (smooth) => {
|
||||
let target = scrollTarget();
|
||||
let x = target.scrollLeft;
|
||||
let y = target.scrollHeight;
|
||||
scroller(target, smooth, false).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollTo(x, y);
|
||||
};
|
||||
|
||||
const scrollToHome = (smooth) => {
|
||||
let target = scrollTarget();
|
||||
let x = 0;
|
||||
let y = target.scrollTop;
|
||||
scroller(target, smooth, false).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollTo(x, y);
|
||||
};
|
||||
|
||||
const scrollToEnd = (smooth) => {
|
||||
let target = scrollTarget();
|
||||
let x = target.scrollWidth;
|
||||
let y = target.scrollTop;
|
||||
scroller(target, smooth, false).scroll(x, y);
|
||||
new Scroller(target, smooth).scrollTo(x, y);
|
||||
};
|
||||
|
||||
export {
|
||||
|
|
Reference in a new issue