vue组件-隐藏滚动条

原理说明:

给需要滚动的盒子加一层 壳(wrapper)，给壳加一个css属性(重点)：overflow: hidden 然后给内容的包裹盒子( .scroll )加个负数滚动条的宽度的外边距(垂直方向: margin-right, 水平方向: margin-bottom)

具体的代码:

<template>
  <div class="scroll-wrapper" ref="content">
    <div class="scroll" ref="scroll">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hidden-scroll',
  props:['y', 'x'],
  methods:{
    //获取滚动条的高度
    getScrollbarWidth() {
      let oP = document.createElement('p'),
        styles = {
          width: '100px',
          height: '100px',
          overflowY: 'scroll'
        },
        i, scrollbarWidth;
      for (i in styles) oP.style[i] = styles[i]
      document.body.appendChild(oP);
      scrollbarWidth = oP.offsetWidth - oP.clientWidth;
      oP.remove();
      return scrollbarWidth;
    }
  },
  mounted(){
    const {x, y} = this,
    sc = this.getScrollbarWidth(), //获取滚动条的宽度
    $scroll = this.$refs.scroll;
    // 如果是垂直滚动条 则右边距-滚动条的宽度
    if (y) {
      $scroll.style.marginRight = `-${sc}px`
    }
    // 如果是水平滚动条 则下边距-滚动条的宽度
    if (x) {
      $scroll.style.marginBottom = `-${sc}px`
    }

  }
}
</script>
<style lang="scss" scoped>
.scroll-wrapper{
  overflow: hidden;
  .scroll{
    overflow: auto;
  }
}
</style>

使用：

<template>
    <!-- 水平方向 -->
    <hidden-scroll :x="true">
      <p style="height: 60px; line-height: 60px; width: 1000px">
        <span>测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测</span>
      </p>
    </hidden-scroll>

    <!-- 垂直方向 -->
    <hidden-scroll :y="true">
      <div style="height: 100px">
        <p v-for="i in 5" style="height: 60px" :key="i">测试测试测试测试测试</p>
      </div>
    </hidden-scroll>
</template>