perf: optimized zoom out image when scroll

source/js/utils.js

@@ -238,6 +238,7 @@ KEEP.initUtils = () => {
     zoomInImage() {
       let SIDE_GAP = 40
       let isZoomIn = false
+      let curWinScrollY = 0
       let selectedImgDom = null
       const imgDomList = document.querySelectorAll('.markdown-body img')
       const zoomInImgMask = document.querySelector('.zoom-in-image-mask')
@@ -246,10 +247,10 @@ KEEP.initUtils = () => {
       const zoomOut = () => {
         if (isZoomIn) {
           isZoomIn = false
+          curWinScrollY = 0
           zoomInImg && (zoomInImg.style.transform = `scale(1)`)
           zoomInImgMask && zoomInImgMask.classList.remove('show')
-          const timer = setTimeout(() => {
+          setTimeout(() => {
-            clearTimeout(timer)
             selectedImgDom && selectedImgDom.classList.remove('hide')
           }, 300)
         }
@@ -262,7 +263,9 @@ KEEP.initUtils = () => {
         })
 
         document.addEventListener('scroll', () => {
+          if (isZoomIn && Math.abs(curWinScrollY - window.scrollY) >= 50) {
             zoomOut()
+          }
         })
       }
 
@@ -281,6 +284,7 @@ KEEP.initUtils = () => {
         zoomOutHandle()
         imgDomList.forEach((img) => {
           img.addEventListener('click', () => {
+            curWinScrollY = window.scrollY
             isZoomIn = !isZoomIn
             setSideGap()
             zoomInImg.setAttribute('src', img.getAttribute('src'))