纵向控制的横向滚动

<template>
  <div class="scroll-container" id="scroll-container">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

   <script>
export default {
  data() {
    return {};
  },
  mounted() {
    const container = document.getElementById("scroll-container");
    // let width='';
    // let height='';
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        console.log(width, height, container.querySelector(".v-scroll"));
        try {
            container.querySelector('.v-scroll').style.width=height+'px';
            container.querySelector('.v-scroll').style.height=width+'px';
            container.querySelector('.v-scroll').style.transform=`translateY(${height}px) rotate(-90deg)`

            container.querySelector('.content').style.width=width+'px';
            container.querySelector('.content').style.height=height+'px';
            container.querySelector('.content').style.left=height+'px';
        } catch (error) {

        }
      }
    });

    resizeObserver.observe(container);
  },
  methods: {
    handleChange({ width, height }) {
      console.log(width, height);
    },
  },
};
</script>

   <style scoped lang="scss">
.scroll-container {
  width: 100%;
  height: 100%;
  .v-scroll {
    position: relative;
    overflow: auto;
    transform-origin: left top;
// border: 1px solid red;
&::-webkit-scrollbar{
    display: none;
}
  }
  .content{
    position: absolute;
    top: 0;
transform-origin: left top;
// border: 1px solid red;
transform:rotate(90deg)


  }
}
</style>

<template>
 <div class="viewbox">
    <scrollcom>
       <div style="white-space: nowrap;

    width: max-content;">
        <div v-for="item in 10" :key="item" style="float:left">
            {{ item }}
            <img src="@/assets/img/01.png" alt="">
        </div>
       </div>
    </scrollcom>

 </div>
</template>

<script>
import scrollcom from '@/components/scroll'
 export default {
    components:{scrollcom}

 }
</script>

<style scoped>
.viewbox{
    width: 100vw;
    height: 500px;
    background: #ccc;
}

</style>