简介

这个 Vue 3 组件实现了一个特殊的滚动效果，通过纵向滚动来控制横向滚动，从而实现了一种独特的展示方式。该组件包含了一个容器，内部包含了一个纵向滚动的区域，其中的内容会在横向方向上滚动。这种设计可以用于展示横向内容较多的情况，同时保持纵向滚动的便捷性。

组件结构

<template>
  <div v-size-ob="handleSizeChange" class="scroll-container">
    <div class="v-scroll">
        <div class="content">
            <slot></slot>
        </div>
    </div>

  </div>
</template>


<script setup lang="ts">
import { reactive } from "vue"

const size = reactive({
    w: 0,
    h: 0
})

function handleSizeChange({width, height}){
    console.log(width,height)
    size.w = width
    size.h = height

}
</script>


<style scoped>
.scroll-container{
    width: 100%;
    height: 100%;
    position: relative;
    
}
.v-scroll{
    --w: calc(v-bind(size.w) * 1px);
    --h: calc(v-bind(size.h) * 1px);
    width: var(--h);
    height: var(--w);
    transform-origin: left top;
    transform:translateY(var(--h)) rotate(-90deg);
    overflow:hidden scroll;
    position: absolute;
}
.v-scroll::-webkit-scrollbar {
  display: none;
}
.content{
    width: var(--w);
    height: var(--h);
    position: absolute;
    left: var(--h);
    transform-origin: left top;
    transform: rotate(90deg);
}
</style>

使用方法

安装

确保你已经在项目中安装了 Vue 3。

使用组件

在需要使用该组件的地方，引入并使用它：

<XScroll >
    <div class="TeamBox">
        <div style="display: flex;flex-direction: column;align-items: center;"
            v-for="item in TeamImg.sort(randomSort)" :key="item">
         </div>        
    </div>
</XScroll>

效果说明

  • scroll-container 类定义了整个容器的样式，占据整个父容器的宽高。

  • v-scroll 类定义了纵向滚动区域的样式，通过旋转和位移实现了横向滚动的效果。

  • content 类定义了内容区域的样式，通过旋转实现了内容的横向展示。

结语

通过这个组件，你可以实现一种特殊的滚动效果，将横向内容以纵向滚动的方式展示，为展示横向内容提供了一种新颖的解决方案