Smoother scrolling

frontend/styles.css

@@ -37,40 +37,38 @@ body {
     width: 100%;
     height: 100%;
     position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+    scroll-snap-type: y mandatory;
+    -webkit-overflow-scrolling: touch;
 }
 
 .video-item {
     width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
+    min-height: 100vh;
+    height: 100vh;
+    position: relative;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    opacity: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #000;
     touch-action: none;
-    z-index: 1;
 }
 
 .video-item.active {
     opacity: 1;
-    z-index: 2;
 }
 
 .video-item.prev {
-    opacity: 0;
-    z-index: 1;
+    opacity: 1;
 }
 
 .video-item.next {
-    opacity: 0;
-    z-index: 1;
+    opacity: 1;
 }
 
 video {