correction scroll preview

This commit is contained in:
Julie Blanc 2026-03-08 08:51:22 +01:00
parent c3c9de2ca2
commit ccdd9bda05
3 changed files with 15 additions and 6 deletions

View file

@ -149,7 +149,6 @@ onMounted(async () => {
height: 100vh; height: 100vh;
border: none; border: none;
transform-origin: top center; transform-origin: top center;
transition: transform 0.3s ease;
} }

View file

@ -195,7 +195,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, watch, onMounted, inject } from 'vue'; import { ref, computed, watch, onMounted, inject, nextTick } from 'vue';
import bookIcon from '/assets/svg/book.svg?raw'; import bookIcon from '/assets/svg/book.svg?raw';
import { useStylesheetStore } from '../../stores/stylesheet'; import { useStylesheetStore } from '../../stores/stylesheet';
import { useDebounce } from '../../composables/useDebounce'; import { useDebounce } from '../../composables/useDebounce';
@ -518,7 +518,7 @@ const syncFromStore = () => {
(rightPageMatch && rightPageMatch[0].includes('string(title)')); (rightPageMatch && rightPageMatch[0].includes('string(title)'));
runningTitle.value = hasRunningTitle; runningTitle.value = hasRunningTitle;
} finally { } finally {
isUpdatingFromStore = false; nextTick(() => { isUpdatingFromStore = false; });
} }
}; };

View file

@ -11,13 +11,23 @@ import { ref, computed } from 'vue';
const zoomLevel = ref(1); const zoomLevel = ref(1);
const zoomIn = () => { zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3); }; const zoomIn = () => { triggerZoom(); zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3); };
const zoomOut = () => { zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.2); }; const zoomOut = () => { triggerZoom(); zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.2); };
const zoomReset = () => { zoomLevel.value = 1; }; const zoomReset = () => { triggerZoom(); zoomLevel.value = 1; };
const isZooming = ref(false);
let zoomTimer = null;
const triggerZoom = () => {
isZooming.value = true;
clearTimeout(zoomTimer);
zoomTimer = setTimeout(() => { isZooming.value = false; }, 350);
};
const zoomStyle = computed(() => ({ const zoomStyle = computed(() => ({
transform: `scale(${zoomLevel.value})`, transform: `scale(${zoomLevel.value})`,
height: `${100 / zoomLevel.value}vh`, height: `${100 / zoomLevel.value}vh`,
transition: isZooming.value ? 'transform 0.3s ease' : 'none',
})); }));
defineExpose({ zoomStyle }); defineExpose({ zoomStyle });