我有一个计算变量CSS网格,其中每个项目都有一个属性“grid-row”和“grid-column”。底部加水平滚动条没问题
但我想单独滚动每一行。如何才能实现这一目标?
这是vue项目中的一个组件。
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
contents: {
'754637': {
first: 'Bla Bla',
second: 'test Test',
third: 'some some'
},
'454554': {
first: 'Bla Bla',
second: 'test Test',
third: 'some some'
},
'12121212': {
first: 'Bla Bla',
second: 'test Test',
third: 'some some'
}
},
rowIndex: {
'754637': 2,
'454554': 3,
'12121212': 4
}
}
})
.container {
display: grid;
max-width: 100%;
grid-auto-flow: column;
overflow-x: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container" id="comparison-table-container">
<div :style="{ 'grid-row': 1, 'grid-column': 1, 'width':'1000px'}">
Title 1
</div>
<div :style="{ 'grid-row': 1, 'grid-column': 2, 'width':'1000px' }">
Title 2
</div>
<div :style="{ 'grid-row': 1, 'grid-column': 3, 'width':'1000px' }">
Title 3
</div>
<template v-for="(content, key) in contents" >
<div :key="1+key" :style="{ 'grid-row': rowIndex[key], 'grid-column': '1' }">
{{content.first}}
</div>
<div :key="2+key" :style="{ 'grid-row': rowIndex[key], 'grid-column': '2' }">
{{content.second}}
</div>
<div :key="3+key" :style="{ 'grid-row': rowIndex[key], 'grid-column': '3' }">
{{content.third}}
</div>
</template>
</div>
</div>
您可以将每一行设为单独的网格,以便单独滚动它们。
.container>div {
display: grid;
grid-template-columns: repeat(3, 1000px);
border: 1px solid lime;
gap: 1em;
overflow-x: scroll;
margin-bottom: 1em;
}
<div class="container" id="comparison-table-container">
<div>
<div>Title 1</div>
<div>Title 2</div>
<div>Title 3</div>
</div>
<div>
<div>Bla Bla</div>
<div>test Test</div>
<div>some some</div>
</div>
<div>
<div>Bla Bla</div>
<div>test Test</div>
<div>some some</div>
</div>
<div>
<div>Bla Bla</div>
<div>test Test</div>
<div>some some</div>
</div>
</div>