mingnan-website/src/components/container/SimpleScrollView.vue

<template>
  <div 
    :class="[
      'nana-scroll-view',
      scrollX ? 'x' : '',
      scrollY ? 'y' : ''
    ]"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
/**
 * 组件说明：可滚动的容器。
 */
const props = defineProps({	
  scrollX: {
    type: Boolean,
    default: false
  },
  scrollY: {
    type: Boolean,
    default: false 
  }
})
</script>

<style lang="scss" scoped>
.nana-scroll-view {
  overflow: hidden;
  
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  &::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    opacity: .7;
    border-radius: 3px;

    &:hover {
      background: #707070;
    }
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &.x {
    overflow-x: scroll; 
  }
  &.y {
    overflow-y: scroll; 
  }
}
</style>