<!--
 * @Author: 曹捷
 * @Date: 2021-03-23 17:20:36
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-05-10 11:34:02
 * @Description: fileContent
-->
<template>
  <div class="obit-scrollbar">
    <div class="scrollbar-wrapper" :class="{'scrollX':scrollX,'scrollY':scrollY}">
      <!-- :style="{'margin-right':width+'px','margin-bottom':width+'px'}" -->
      <!-- 'padding-bottom':(width*-1)+'px' -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  props: {
    scrollY: {
      type: Boolean,
      default: true
    },
    scrollX: {
      type: Boolean,
      default: false
    },
  },
  setup () {
    let scrollBarWidth
    function scrollbarWidth () {
      if (scrollBarWidth !== undefined) return scrollBarWidth;
      const outer = document.createElement('div');
      outer.className = 'el-scrollbar__wrap';
      outer.style.visibility = 'hidden';
      outer.style.width = '100px';
      outer.style.position = 'absolute';
      outer.style.top = '-9999px';
      document.body.appendChild(outer);
      const widthNoScroll = outer.offsetWidth;
      outer.style.overflow = 'scroll';

      const inner = document.createElement('div');
      inner.style.width = '100%';
      outer.appendChild(inner);

      const widthWithScroll = inner.offsetWidth;
      outer.parentNode.removeChild(outer);
      scrollBarWidth = widthNoScroll - widthWithScroll;

      return scrollBarWidth;
    }
    let width = ref(0 - scrollbarWidth())
    return {
      width
    }
  }
}
</script>

<style lang="less">
.obit-scrollbar {
  overflow: hidden;
  position: relative;
  height: 100%;
  .scrollbar-wrapper {
    height: 100%;
  }
  .scrollY {
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
  .scrollX {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      height: 0 !important;
    }
  }
}
</style>