mx-paper - navigator max height optimized

src/components/MxPaper/mx-paper-navigator.vue

@@ -4,11 +4,11 @@
       答题卡
       <plus-paper-help class="absolute f-999" style="right: 0"></plus-paper-help>
     </div>
-    <div class="fx-row fx-wrap fx-bet-cen mt20">
+    <div ref="paper-navigator-buttons" class="fx-row fx-wrap fx-bet-cen mt20 paper-navigator-buttons">
       <template v-for="(q, index) in paper.questions">
         <el-badge :value="calcBadgeValue(q,index)" :type="calcBadgeType(q,index)">
           <el-button class="navigator-button" :type="calcButtonType(q, index)" :class="calcButtonClass(q, index)"
-                     @click="goIndexAction(index)">
+                     :id="`navigator-button-${q.questionId}`" @click="goIndexAction(index)">
             <span class="fx-row fx-cen-cen">{{ q.seq }}</span>
           </el-button>
         </el-badge>
@@ -35,6 +35,18 @@ export default {
   components: { PlusPaperHelp, PlusPaperScore, PlusPaperCountdown },
   mixins: [paperMixin],
   name: 'mx-paper-navigator',
+  watch: {
+    'currentQuestion': function(val) {
+      setTimeout(() => {
+        if (!val?.questionId) return
+        // code below will keep navigation buttons always visible for current question.
+        const container = this.$refs['paper-navigator-buttons']
+        const buttonId = 'navigator-button-' + val.questionId
+        const target = container.querySelector('#' + buttonId)
+        this.$scrollTo(target, 300, { offset: -20, container })
+      }, 200)
+    }
+  },
   methods: {
     calcBadgeType(q, idx) {
       return this.allowAnswer ? 'success' : 'danger'
@@ -56,6 +68,12 @@ export default {
 }
 </script>
 <style scoped>
+.paper-navigator-buttons {
+  max-height: calc(100vh - 500px);
+  min-height: 220px;
+  overflow-y: auto;
+}
+
 .navigator-button {
   width: 40px;
   height: 40px;