<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>