smooth scrolling on iOS

doc/changelog.md

@@ -1,6 +1,7 @@
 # upcoming
 
 - (new) serve on unix socket (thanks to @rvighne)
+- (fix) smooth scrolling on iOS (thanks to gatheraled)
 
 # v2.5 (2025-03-26)
 

src/assets/index.html

@@ -122,7 +122,7 @@
                     </button>
                 </dropdown>
             </div>
-            <div id="feed-list-scroll" class="p-2 overflow-auto border-top flex-grow-1">
+            <div id="feed-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1">
                 <label class="selectgroup">
                     <input type="radio" name="feed" value="" v-model="feedSelected">
                     <div class="selectgroup-label d-flex align-items-center w-100">
@@ -272,7 +272,7 @@
                     </button>
                 </dropdown>
             </div>
-            <div id="item-list-scroll" class="p-2 overflow-auto border-top flex-grow-1" v-scroll="loadMoreItems" ref="itemlist">
+            <div id="item-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1" v-scroll="loadMoreItems" ref="itemlist">
                 <label v-for="item in items" :key="item.id"
                        class="selectgroup">
                     <input type="radio" name="item" :value="item.id" v-model="itemSelected">
@@ -347,7 +347,7 @@
             </div>
             <div v-if="itemSelectedDetails"
                  ref="content"
-                 class="content px-4 pt-3 pb-5 border-top overflow-auto"
+                 class="content px-4 pt-3 pb-5 border-top overflow-auto scroll-touch"
                  :class="{'font-serif': theme.font == 'serif', 'font-monospace': theme.font == 'monospace'}"
                  :style="{'font-size': theme.size + 'rem'}">
                 <div class="content-wrapper">

src/assets/stylesheets/app.css

@@ -100,6 +100,10 @@ select.form-control:not([multiple]):not([size]) {
   padding-right: 0;
 }
 
+.scroll-touch {
+  -webkit-overflow-scrolling: touch;
+}
+
 /* custom elements */
 
 .font-serif {