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;
|
scrolling = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
class SmoothScroller {
|
class Scroller {
|
||||||
constructor(element) {
|
constructor(element, smooth) {
|
||||||
this.element = element;
|
this.element = element;
|
||||||
|
this.smooth = smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
scroll(x, y) {
|
scrollTo(x, y) {
|
||||||
|
let behavior = this.smooth ? 'smooth' : 'auto';
|
||||||
window.scrollTo({
|
window.scrollTo({
|
||||||
left: x,
|
left: x,
|
||||||
top: y,
|
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;
|
scrolling = true;
|
||||||
if (lastTimeoutId) {
|
if (lastTimeoutId) {
|
||||||
clearTimeout(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 = () => {
|
const getScroll = () => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
return { x: target.scrollLeft, y: target.scrollTop };
|
return { x: target.scrollLeft, y: target.scrollTop };
|
||||||
|
@ -99,66 +114,63 @@ const getScroll = () => {
|
||||||
|
|
||||||
const scrollVertically = (count, smooth) => {
|
const scrollVertically = (count, smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
let x = target.scrollLeft;
|
let delta = SCROLL_DELTA_Y * count;
|
||||||
let y = target.scrollTop + SCROLL_DELTA_Y * count;
|
|
||||||
if (scrolling) {
|
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) => {
|
const scrollHorizonally = (count, smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
let x = target.scrollLeft + SCROLL_DELTA_X * count;
|
let delta = SCROLL_DELTA_X * count;
|
||||||
let y = target.scrollTop;
|
|
||||||
if (scrolling) {
|
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) => {
|
const scrollPages = (count, smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
let height = target.clientHeight;
|
let height = target.clientHeight;
|
||||||
let x = target.scrollLeft;
|
let delta = height * count;
|
||||||
let y = target.scrollTop + height * count;
|
|
||||||
if (scrolling) {
|
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) => {
|
const scrollTo = (x, y, smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
scroller(target, smooth, false).scroll(x, y);
|
new Scroller(target, smooth).scrollTo(x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
const scrollToTop = (smooth) => {
|
const scrollToTop = (smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
let x = target.scrollLeft;
|
let x = target.scrollLeft;
|
||||||
let y = 0;
|
let y = 0;
|
||||||
scroller(target, smooth, false).scroll(x, y);
|
new Scroller(target, smooth).scrollTo(x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
const scrollToBottom = (smooth) => {
|
const scrollToBottom = (smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
let x = target.scrollLeft;
|
let x = target.scrollLeft;
|
||||||
let y = target.scrollHeight;
|
let y = target.scrollHeight;
|
||||||
scroller(target, smooth, false).scroll(x, y);
|
new Scroller(target, smooth).scrollTo(x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
const scrollToHome = (smooth) => {
|
const scrollToHome = (smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
let x = 0;
|
let x = 0;
|
||||||
let y = target.scrollTop;
|
let y = target.scrollTop;
|
||||||
scroller(target, smooth, false).scroll(x, y);
|
new Scroller(target, smooth).scrollTo(x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
const scrollToEnd = (smooth) => {
|
const scrollToEnd = (smooth) => {
|
||||||
let target = scrollTarget();
|
let target = scrollTarget();
|
||||||
let x = target.scrollWidth;
|
let x = target.scrollWidth;
|
||||||
let y = target.scrollTop;
|
let y = target.scrollTop;
|
||||||
scroller(target, smooth, false).scroll(x, y);
|
new Scroller(target, smooth).scrollTo(x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|
Reference in a new issue