如何为每个CSS网格行添加单独的滚动条？

Question

我有一个计算变量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>

Answer 1

您可以将每一行设为单独的网格，以便单独滚动它们。

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