LoongPanel-Asp/web/components/XScroll.vue

<script lang="ts" setup>
const el = ref(null)
const boxEl = ref(null)
const {width, height} = useElementSize(el)
const {width: boxWidth, height: boxHeight} = useElementSize(boxEl)

</script>

<template>
  <div ref="boxEl" class="scroll-container">
    <div class="v-scroll">
      <div ref="el" class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "base";
.scroll-container {
  --w: calc(v-bind('width') * 1px);
  --h: calc(v-bind('height') * 1px);
  --bw: calc(v-bind('boxWidth') * 1px);
  --bh: calc(v-bind('boxHeight') * 1px);
  width: 100%;
  height: var(--h);
}

.v-scroll {
  height: var(--bw);
  width: var(--bh);
  position: relative;
  transform-origin: left top;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  transform: rotate(-90deg) translateX(calc(var(--bh) * -1));
}

.content {
  position: absolute;
  left: var(--h);
  width:  var(--bw);
  transform-origin: left top;
  transform: rotate(90deg);
}
</style>