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

scroller: reduce repaints 

Signed-off-by: Varun Patil <radialapps@gmail.com>
pull/888/head
Varun Patil 2023-10-19 14:13:53 -07:00
parent 2a333911ef
commit e96b10da46
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ScrollerManager.vue
View File

@ -35,14 +35,16 @@
</div> </div>
</span> </span>
<div <div class="ticks-container fill-block">
v-for="tick of visibleTicks" <div
:key="tick.key" v-for="tick of visibleTicks"
class="tick" :key="tick.key"
:class="{ dash: !tick.text }" class="tick"
:style="{ transform: `translateY(calc(${tick.top}px - 50%))` }" :class="{ dash: !tick.text }"
> :style="{ transform: `translateY(calc(${tick.top}px - 50%))` }"
<span v-if="tick.text">{{ tick.text }}</span> >
<span v-if="tick.text">{{ tick.text }}</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -632,7 +634,14 @@ export default defineComponent({
visibility: hidden; visibility: hidden;
} }
> .tick { > .ticks-container {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
}
> .ticks-container > .tick {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
font-size: 0.75em; font-size: 0.75em;
@ -721,11 +730,11 @@ export default defineComponent({
pointer-events: all; pointer-events: all;
} }
> .tick { > .ticks-container > .tick {
right: 40px; right: 40px;
} }
&:not(.scrolling) { &:not(.scrolling) {
> .tick { > .ticks-container > .tick {
display: none; display: none;
} }
} }