RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve scroller behavior

pull/162/head
Varun Patil 2022-10-29 16:47:37 -07:00
parent 87973c2d5d
commit 80835421a5
1 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/ScrollerManager.vue
View File

@ -3,7 +3,8 @@
class="scroller" class="scroller"
ref="scroller" ref="scroller"
v-bind:class="{ v-bind:class="{
'scrolling-recycler': scrollingRecycler, 'scrolling-recycler': scrollingRecyclerTimer,
'scrolling-recycler-now': scrollingRecyclerNowTimer,
scrolling: scrolling, scrolling: scrolling,
}" }"
@mousemove="mousemove" @mousemove="mousemove"
@ -78,16 +79,16 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
private scrolling = false; private scrolling = false;
/** Scrolling timer */ /** Scrolling timer */
private scrollingTimer = null as number | null; private scrollingTimer = null as number | null;
/** Scrolling recycler currently */
private scrollingRecycler = false;
/** Scrolling recycler timer */ /** Scrolling recycler timer */
private scrollingRecyclerTimer = null as number | null; private scrollingRecyclerTimer = 0;
/** Scrolling recycler timer */
private scrollingRecyclerNowTimer = 0;
/** Recycler scrolling throttle */
private scrollingRecyclerUpdateTimer = 0;
/** View size reflow timer */ /** View size reflow timer */
private reflowRequest = false; private reflowRequest = false;
/** Tick adjust timer */ /** Tick adjust timer */
private adjustRequest = false; private adjustRequest = false;
/** Recycler scrolling throttle */
private recyclerScrollDirty = false;
/** Get the visible ticks */ /** Get the visible ticks */
get visibleTicks() { get visibleTicks() {
@ -117,14 +118,12 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
/** Recycler scroll event, must be called by timeline */ /** Recycler scroll event, must be called by timeline */
public recyclerScrolled() { public recyclerScrolled() {
if (!this.recyclerScrollDirty) { if (this.scrollingRecyclerUpdateTimer) return;
this.recyclerScrollDirty = true; this.scrollingRecyclerUpdateTimer = window.setTimeout(() => {
window.setTimeout(() => { this.scrollingRecyclerUpdateTimer = 0;
this.recyclerScrollDirty = false;
requestAnimationFrame(this.updateFromRecyclerScroll); requestAnimationFrame(this.updateFromRecyclerScroll);
}, 100); }, 100);
} }
}
/** Update cursor position from recycler scroll position */ /** Update cursor position from recycler scroll position */
public updateFromRecyclerScroll() { public updateFromRecyclerScroll() {
@ -150,13 +149,18 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
this.moveHoverCursor(rtop); this.moveHoverCursor(rtop);
} }
// Animate the cursor
if (this.scrollingRecyclerNowTimer)
window.clearTimeout(this.scrollingRecyclerNowTimer);
this.scrollingRecyclerNowTimer = window.setTimeout(() => {
this.scrollingRecyclerNowTimer = 0;
}, 200);
// Show the scroller for some time // Show the scroller for some time
if (this.scrollingRecyclerTimer) if (this.scrollingRecyclerTimer)
window.clearTimeout(this.scrollingRecyclerTimer); window.clearTimeout(this.scrollingRecyclerTimer);
this.scrollingRecycler = true;
this.scrollingRecyclerTimer = window.setTimeout(() => { this.scrollingRecyclerTimer = window.setTimeout(() => {
this.scrollingRecycler = false; this.scrollingRecyclerTimer = 0;
this.scrollingRecyclerTimer = null;
}, 1500); }, 1500);
} }
@ -569,7 +573,6 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
min-width: 100%; min-width: 100%;
min-height: 1.5px; min-height: 1.5px;
will-change: transform; will-change: transform;
transition: transform 0.1s linear;
&.st { &.st {
font-size: 0.75em; font-size: 0.75em;
@ -593,6 +596,9 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
} }
} }
} }
&.scrolling-recycler-now > .cursor {
transition: transform 0.1s linear;
}
&:hover > .cursor { &:hover > .cursor {
transition: none; transition: none;
&.st { &.st {