xjsaas-ui/src/components/scroll/fssm-scroll.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-14 15:22:21
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-14 15:26:52
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\fssm-scroll.vue
 * @Description: 滚动条封装样式
-->
<template>
  <div :class="showBar ? `scroll-box` : `scroll-box-disabled`">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "FssmScroll",
  props: {
    showBar: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-box {
  width: 100%;
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 7px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(222, 225, 230, 1);
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 7px;
    background: rgba(220, 231, 248, 0.1);
  }
}

.scroll-box-disabled {
  width: 100%;
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>