Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Scroll relative to bottom of screen

Browse source 
From my experiments, setting flex-direction: column-reverse on the body
doesn't work, it has to be a separate element. Maybe I made a mistake
somewhere though. In any case, this code seems to work properly.
This commit is contained in:
Joscha 2025-03-03 00:43:02 +01:00
parent 32d68cb60c
commit e8c09f3b6d
1 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
showbits-thermal-printer-ui/src/App.vue
View file

@ -3,12 +3,23 @@ import CSegment from "./components/CSegment.vue";
</script> </script>
<template> <template>
<div class="scroll">
<div class="strip"> <div class="strip">
<CSegment /> <CSegment />
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
.scroll {
height: 100dvh;
overflow: auto;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.strip { .strip {
box-sizing: content-box; box-sizing: content-box;
width: 384px; width: 384px;
@ -45,13 +56,6 @@ h2 {
} }
body { body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column-reverse;
align-items: center;
background-color: black; background-color: black;
} }
</style> </style>