Улучшения скроллинга

client/components/Search/Search.vue

@@ -1,72 +1,7 @@
 <template>
     <div class="root column fit">
-        <div class="tool-panel column bg-green-11">
-            <div class="header q-mx-md q-mt-sm row justify-between items-center">
-                <div class="row items-center">
-                    <div class="q-mr-xs">
-                        Коллекция
-                    </div>
-                    <div class="clickable" @click="showCollectionInfo">
-                        {{ collection }}
-                    </div>
-                </div>
-                <div class="q-ml-md">
-                    {{ projectName }}
-                </div>
-            </div>
-            <div class="row q-mx-md q-my-sm items-center">
-                <q-input
-                    ref="authorInput" v-model="author" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                    class="bg-white q-mt-xs" style="width: 300px;" label="Автор" stack-label outlined dense clearable
-                />
-                <div class="q-mx-xs" />
-                <q-input
-                    v-model="series" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                    class="bg-white q-mt-xs" style="width: 200px;" label="Серия" stack-label outlined dense clearable
-                />
-                <div class="q-mx-xs" />
-                <q-input
-                    v-model="title" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                    class="bg-white q-mt-xs" style="width: 200px;" label="Название" stack-label outlined dense clearable
-                />
-                <div class="q-mx-xs" />
-                <q-input
-                    v-model="genre" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                    class="bg-white q-mt-xs" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
-                    @click="selectGenre"
-                />
-                <div class="q-mx-xs" />
-                <q-input
-                    v-model="lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                    class="bg-white q-mt-xs" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
-                    @click="selectLang"
-                />
-                <div class="q-mx-xs" />                
-                <q-btn round dense style="height: 20px" color="info" icon="la la-question" @click="showSearchHelp" />
-
-                <div class="q-mx-xs" />
-                <div class="row items-center q-mt-xs">
-                    <div v-show="queryFound > 0">
-                        Показаны {{ queryFound }} из {{ totalFound }} найденных авторов
-                    </div>
-                    <div v-show="queryFound == 0">
-                        Ничего не найдено
-                    </div>
-                </div>
-
-                <div class="q-mx-xs" />
-                <div class="col row justify-end q-mt-xs">
-                    <q-select
-                        v-model="limit" :options="limitOptions" class="bg-white"
-                        dropdown-icon="la la-angle-down la-sm"
-                        outlined dense emit-value map-options
-                    />
-                </div>
-            </div>
-        </div>
-
         <div class="col fit" style="position: relative">
-            <div v-show="loadingVisible" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2)">
+            <div v-show="loadingVisible" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2); z-index: 1">
                 <div class="bg-white row justify-center items-center" style="width: 180px; height: 50px; border-radius: 10px; box-shadow: 2px 2px 10px #333333">
                     <q-spinner color="primary" size="2em" />
                     <div class="q-ml-sm">
@@ -75,7 +10,72 @@
                 </div>
             </div>
 
-            <div class="col fit column no-wrap" style="overflow: auto">
+            <div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
+                <div ref="toolPanel" class="tool-panel column bg-green-11" style="position: sticky; top: 0;">
+                    <div class="header q-mx-md q-mt-sm row justify-between items-center">
+                        <div class="row items-center">
+                            <div class="q-mr-xs">
+                                Коллекция
+                            </div>
+                            <div class="clickable" @click="showCollectionInfo">
+                                {{ collection }}
+                            </div>
+                        </div>
+                        <div class="q-ml-md">
+                            {{ projectName }}
+                        </div>
+                    </div>
+                    <div class="row q-mx-md q-my-sm items-center">
+                        <q-input
+                            ref="authorInput" v-model="author" :maxlength="5000" :debounce="inputDebounce"
+                            class="bg-white q-mt-xs" style="width: 300px;" label="Автор" stack-label outlined dense clearable
+                        />
+                        <div class="q-mx-xs" />
+                        <q-input
+                            v-model="series" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                            class="bg-white q-mt-xs" style="width: 200px;" label="Серия" stack-label outlined dense clearable
+                        />
+                        <div class="q-mx-xs" />
+                        <q-input
+                            v-model="title" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                            class="bg-white q-mt-xs" style="width: 200px;" label="Название" stack-label outlined dense clearable
+                        />
+                        <div class="q-mx-xs" />
+                        <q-input
+                            v-model="genre" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                            class="bg-white q-mt-xs" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
+                            @click="selectGenre"
+                        />
+                        <div class="q-mx-xs" />
+                        <q-input
+                            v-model="lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                            class="bg-white q-mt-xs" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
+                            @click="selectLang"
+                        />
+                        <div class="q-mx-xs" />                
+                        <q-btn round dense style="height: 20px" color="info" icon="la la-question" @click="showSearchHelp" />
+
+                        <div class="q-mx-xs" />
+                        <div class="row items-center q-mt-xs">
+                            <div v-show="queryFound > 0">
+                                Найдено {{ totalFound }} авторов
+                            </div>
+                            <div v-show="queryFound == 0">
+                                Ничего не найдено
+                            </div>
+                        </div>
+
+                        <div class="q-mx-xs" />
+                        <div class="col row justify-end q-mt-xs">
+                            <q-select
+                                v-model="limit" :options="limitOptions" class="bg-white"
+                                dropdown-icon="la la-angle-down la-sm"
+                                outlined dense emit-value map-options
+                            />
+                        </div>
+                    </div>
+                </div>
+
                 <div v-for="item in tableData" :key="item.key" style="border-bottom: 1px solid #aaaaaa">
                     <div class="q-my-sm q-ml-md" style="font-size: 120%">
                         {{ item.value }}
@@ -201,6 +201,25 @@ class Search {
         this.$root.stdDialog.alert('Выбор языка');
     }
     
+    onScroll() {
+        const curScrollTop = this.$refs.scroller.scrollTop;
+        if (!this.lastScrollTop)
+            this.lastScrollTop = 0;
+        if (!this.lastScrollTop2)
+            this.lastScrollTop2 = 0;
+
+        if (curScrollTop - this.lastScrollTop > 0) {
+            this.$refs.toolPanel.style.position = 'relative';
+            this.$refs.toolPanel.style.top = `${this.lastScrollTop2}px`;
+        } else if (curScrollTop - this.lastScrollTop < 0) {
+            this.$refs.toolPanel.style.position = 'sticky';
+            this.$refs.toolPanel.style.top = 0;
+            this.lastScrollTop2 = curScrollTop;
+        }
+
+        this.lastScrollTop = curScrollTop;    
+    }
+
     async updateTableData() {
         let result = [];