diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index 6885cba944e..719d4d8594d 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">
@@ -290,6 +290,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 470cfeb977c..0d98f93ba59 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -36,6 +36,8 @@
     SCALE_DOWN: 'scale-down'
   };
 
+  let prevOverflow = '';
+
   export default {
     name: 'ElImage',
 
@@ -210,9 +212,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;
       }
     }