From 44e4677fe30894b2a8da30bcc8da4c6b0f0fee12 Mon Sep 17 00:00:00 2001
From: luckyCao <cao.lei1031@163.com>
Date: Thu, 31 Oct 2019 15:16:30 +0800
Subject: [PATCH] Image: Fix shield the page when preview big image (#16796)
 (#16997)

* Image: Fix shield the page when preview big image

* refine

* Image:fix page scroll when use image-viewer by keyup and keydown

* add notes
---
 packages/image/src/image-viewer.vue | 5 ++++-
 packages/image/src/main.vue         | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index 5adce1636ae..c3fc33c08a8 100644
--- a/packages/image/src/image-viewer.vue
+++ b/packages/image/src/image-viewer.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="viewer-fade">
-    <div class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
       <div class="el-image-viewer__mask"></div>
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
@@ -294,6 +294,9 @@ export default {
   },
   mounted() {
     this.deviceSupportInstall();
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus();
   }
 };
 </script>
diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
index 9539db0efcd..d1494aae254 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -38,6 +38,8 @@
     SCALE_DOWN: 'scale-down'
   };
 
+  let prevOverflow = '';
+
   export default {
     name: 'ElImage',
 
@@ -215,9 +217,13 @@
         }
       },
       clickHandler() {
+        // prevent body scroll
+        prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
         this.showViewer = true;
       },
       closeViewer() {
+        document.body.style.overflow = prevOverflow;
         this.showViewer = false;
       }
     }