feat(ImgViewer): add setScrollbar effect

set body paddingRight as scrollbarWidth when body is overflowing

Author: zWingz

.babelrc.js

@@ -1,4 +1,4 @@
-console.log('babelrc-js');
+// console.log('babelrc-js');
 module.exports = {
   "presets": [
     [
@@ -10,15 +10,19 @@ module.exports = {
     "@babel/preset-react"
   ],
   "plugins": [
-    ['@babel/proposal-class-properties', { loose: true }],
-    '@babel/plugin-external-helpers',
+    ['@babel/proposal-class-properties', { loose: true }]
     // "external-helpers"
   ],
   "env": {
     "development": {
       "plugins": [
         "react-hot-loader/babel"
       ]
+    },
+    "production": {
+      "plugins": [
+        '@babel/plugin-external-helpers',
+      ],
     }
   }
 }

develop/App.jsx

@@ -1,9 +1,30 @@
 import React from 'react'
 import { hot } from 'react-hot-loader'
+import { Image } from '../src'
+import './style'
+const Images = (function() {
+  const ret = []
+  for(let i = 1; i <= 20; i++) {
+    ret.push(require(`../doc/assets/${i}.jpg`))
+  }
+  window.Images = ret
+  return ret
+})()
 
 const App = hot(module)(() => (
   <div>
-    development
+    <div className='container' style={{ display: 'flex', flexWrap: 'wrap' }}>
+      {Images.map(each => (
+        <Image
+          group="multi"
+          key={each}
+          src={each}
+          width={120}
+          height={120}
+          style={{ margin: '35px' }}
+        />
+      ))}
+    </div>
   </div>
 ))
 

develop/style.scss

@@ -0,0 +1,10 @@
+body {
+  padding: 20px;
+  margin: 0px;
+  background: red;
+}
+
+.container {
+  width: 600px;
+  margin: 0 auto;
+}

src/lib/ImgPreview/ImgPreview.jsx

@@ -5,6 +5,7 @@ import LoadingIcon from '../LoadingIcon'
 import ErrorIcon from '../ErrorIcon'
 import Image from '../Image'
 import { createObserver } from '../Image/observer'
+import { setScrollbar, resetScrollbar } from '../../utils'
 // import Store from './imgViewStore'
 function find(list, arg) {
   return list.findIndex(each => each === arg)
@@ -103,6 +104,20 @@ export default class ImgPpreview extends React.PureComponent {
     }
   }
 
+  addEffect() {
+    setScrollbar()
+    window.addEventListener('keyup', this.windowKeyUpHandle)
+    document.body.addEventListener('click', this.hideHandle)
+    document.body.style.overflow = 'hidden'
+  }
+
+  removeEffect() {
+    resetScrollbar()
+    window.removeEventListener('keyup', this.windowKeyUpHandle)
+    document.body.removeEventListener('click', this.hideHandle)
+    document.body.style.overflow = ''
+  }
+
   /**
    * 打开图片浏览器
    * 绑定keyup与click事件监听关闭
@@ -112,10 +127,7 @@ export default class ImgPpreview extends React.PureComponent {
     this.setState({
       open: true
     })
-    const { body } = document
-    window.addEventListener('keyup', this.windowKeyUpHandle)
-    body.style.overflow = 'hidden'
-    body.addEventListener('click', this.hideHandle)
+    this.addEffect()
   }
 
   /**
@@ -126,10 +138,7 @@ export default class ImgPpreview extends React.PureComponent {
     this.setState({
       open: false
     })
-    const { body } = document
-    window.removeEventListener('keyup', this.windowKeyUpHandle)
-    body.style.overflow = ''
-    body.removeEventListener('click', this.hideHandle)
+    this.removeEffect()
   }
 
   change = current => {
@@ -402,8 +411,8 @@ export default class ImgPpreview extends React.PureComponent {
 
   _renderFooter() {
     const {
-      state, prev, next, rotateFnc
-    } = this
+ state, prev, next, rotateFnc
+} = this
     const { images, current } = state
     return (
       <>

src/utils/index.js

@@ -0,0 +1,30 @@
+const { documentElement } = document
+let scrollBarWidth = 0
+
+export function getScrollbarSize() {
+  if(scrollBarWidth) {
+    return scrollBarWidth
+  }
+  scrollBarWidth = window.innerWidth - documentElement.clientWidth
+  return scrollBarWidth
+}
+export function getDomStyle(dom, name) {
+  return window.getComputedStyle(dom)[name]
+}
+
+function getBodyOriginPaddingRight() {
+  return parseInt(getDomStyle(document.body, 'paddingRight'), 10)
+}
+
+export function setScrollbar() {
+  const { innerWidth } = window
+  const { clientWidth, offsetWidth } = documentElement
+  if(clientWidth < innerWidth && innerWidth > offsetWidth) {
+    document.body.style.paddingRight = `${getScrollbarSize()
+      + getBodyOriginPaddingRight()}px`
+  }
+}
+
+export function resetScrollbar() {
+  document.body.style.paddingRight = ''
+}