bin-ui/src/mixins/scrollbar-mixin.js

基于 vue2.6 / vue-cli3 的 UI 组件库

// used for Modal  & Drawer
import { getScrollBarWidth } from '../utils/dom'

export default {
  methods: {
    checkScrollBar() {
      let fullWindowWidth = window.innerWidth
      if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
        const documentElementRect = document.documentElement.getBoundingClientRect()
        fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
      }
      this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
      if (this.bodyIsOverflowing) {
        this.scrollBarWidth = getScrollBarWidth()
      }
    },
    checkMaskInVisible() {
      let masks = document.getElementsByClassName('bin-modal-mask') || []
      return Array.from(masks).every(m => m.style.display === 'none' || m.classList.contains('fade-in-linear-leave-to'))
    },
    setScrollBar() {
      if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
        document.body.style.paddingRight = `${this.scrollBarWidth}px`
      }
    },
    resetScrollBar() {
      document.body.style.paddingRight = ''
    },
    addScrollEffect() {
      this.checkScrollBar()
      this.setScrollBar()
      document.body.style.overflow = 'hidden'
    },
    removeScrollEffect() {
      if (this.checkMaskInVisible()) {
        document.body.style.overflow = ''
        this.resetScrollBar()
      }
    }
  }
}