lion/calender.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

snap scroll horizontally (for weeksview)w

Browse source
This commit is contained in:
Alexander Mahr 2025-02-15 19:29:44 +01:00
parent 031e6c00bd
commit 59abe2e50b
1 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/assets/index.html
View file

@ -12,7 +12,10 @@
body,html{ body,html{
background-color:#ffa; background-color:#ffa;
margin:0; margin:0;
padding:0 padding:0;
width:100vw;
height:100vh;
overflow:hidden;
} }
.infinityScroll{ .infinityScroll{
@ -21,17 +24,15 @@ overflow:scroll;
position:relative; position:relative;
} }
* {
font-family: sans;
}
/* disable pinch-zoom*/ /* disable pinch-zoom*/
:root { :root {
touch-action: pan-x pan-y; touch-action: pan-x pan-y;
height: 100% height: 100%
} }
.monthview:hover{
box-shadow: 0 0 20px blue;
}
.monthview { .monthview {
background-color:rgba(255,255,255,0.5); background-color:rgba(255,255,255,0.5);
border:2px solid rgba(0,0,0,0.5); border:2px solid rgba(0,0,0,0.5);
@ -41,6 +42,7 @@ position:relative;
/*margin:5px;*/ /*margin:5px;*/
/* scroll-snap-align: center;*/ /* scroll-snap-align: center;*/
overflow:hidden; overflow:hidden;
transition: all 0s ease-in-out;
} }
.label{ .label{
@ -67,23 +69,44 @@ position:relative;
background-color:white; background-color:white;
} }
#mainDiv{ #weeksDiv{
background: linear-gradient(white,#aaf);
position: absolute;
top:0;
left:100vw;
}
#weeksDiv, #monthsDiv{
box-sizing:border-box; box-sizing:border-box;
margin:0; margin:0;
/* scroll-snap-type: y mandatory;*/ scroll-snap-align: start;
height:100vh; height:100vh;
overflow:scroll; overflow:scroll;
margin:0; margin:0;
width:100vw; width:100vw;
} }
.orig{ .orig{
box-shadow: 0 0 10px grey; box-shadow: 0 0 10px grey;
} }
#all{
scroll-snap-type: x mandatory;
width:100vw;
overflow-x:scroll;
overflow-y:hidden;
height:100vh;
position:relative;
}
</style> </style>
<body> <body>
<div id="mainDiv" class="infinityScroll"></div> <div id="all">
<div id="monthsDiv" class="infinityScroll"></div>
<div id="weeksDiv" class="infinityScroll"></div>
</div>
<script> <script>
window.addEventListener("load",()=>{ window.addEventListener("load",()=>{
@ -184,7 +207,8 @@ window.addEventListener("load",()=>{
},false); },false);
} }
document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll); makeInfinityScroll(document.querySelector("#monthsDiv"));
// document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
},false); },false);