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

scroller: use only hv on mobile

old-stable24
Varun Patil 2022-10-20 16:03:33 -07:00
parent d6ad3c097c
commit 0f4f3b7ef8
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ScrollerManager.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="scroller" <div class="scroller" ref="scroller"
v-bind:class="{ v-bind:class="{
'scrolling-recycler': scrollingRecycler, 'scrolling-recycler': scrollingRecycler,
'scrolling': scrolling, 'scrolling': scrolling,
@ -10,13 +10,14 @@
@mousedown="mousedown"> @mousedown="mousedown">
<span class="cursor st" ref="cursorSt" <span class="cursor st" ref="cursorSt"
:style="{ transform: `translateY(${cursorY}px)` }"> :style="{ transform: `translateY(${cursorY}px)` }">
</span> </span>
<span class="cursor hv" <span class="cursor hv"
:style="{ transform: `translateY(${hoverCursorY}px)` }"> :style="{ transform: `translateY(${hoverCursorY}px)` }"
<div class="text"> {{ hoverCursorText }} </div> @touchmove="touchmove">
<div class="icon"> <ScrollIcon :size="22" /> </div> <div class="text"> {{ hoverCursorText }} </div>
<div class="icon"> <ScrollIcon :size="22" /> </div>
</span> </span>
<div v-for="tick of visibleTicks" :key="tick.key" <div v-for="tick of visibleTicks" :key="tick.key"
@ -347,7 +348,7 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
/** Handle touch */ /** Handle touch */
private touchmove(event: any) { private touchmove(event: any) {
const rect = event.target.getBoundingClientRect(); const rect = (this.$refs.scroller as HTMLElement).getBoundingClientRect();
const y = event.targetTouches[0].pageY - rect.top; const y = event.targetTouches[0].pageY - rect.top;
this.recycler.scrollToPosition(this.getRecyclerY(y)); this.recycler.scrollToPosition(this.getRecyclerY(y));
event.preventDefault(); event.preventDefault();
@ -396,6 +397,10 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
// Hide ticks on mobile unless hovering // Hide ticks on mobile unless hovering
@include phone { @include phone {
// Shift pointer events to hover cursor
pointer-events: none;
.cursor.hv { pointer-events: all; }
&:not(.scrolling) { &:not(.scrolling) {
.cursor.hv { .cursor.hv {
left: 5px; left: 5px;