51 lines
1013 B
Vue
51 lines
1013 B
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> |