如何在多个网格行上溢出时进行单个滚动滚动答案

【问题标题】：How to make a single roll scroll on overflow over multiple grid row如何在多个网格行上溢出时进行单个滚动滚动
【发布时间】：2020-01-29 15:14:12
【问题描述】：

我写了一些 HTML/CSS 代码，连续跨越四本书图像，当屏幕变得响应时，溢出启用为自动。挑战在于如何一次只滚动一行，而其他行在溢出时继续滚动。下面是我的代码sn-p

.book-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 5.5rem;
  width: 90%;
  margin: auto;
  overflow: auto;
}

.book-section-grid>div img {
  width: 100%;
}

<div class="book-section-grid">
  <div>
    <img src="https://via.placeholder.com/220x312/b3d7ff/FFFFFF/?text=Book-A" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div>
    <img src="https://via.placeholder.com/220x312/4169E2/FFFFFF/?text=Book-B" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div>
    <img src="https://via.placeholder.com/220x312/c4c4c4/FFFFFF/?text=Book-C" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div>
    <img src="https://via.placeholder.com/220x312/17a2b8/FFFFFF/?text=Book-D" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div>
    <img src="https://via.placeholder.com/220x312/b3d7ff/FFFFFF/?text=Book-A" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div>
    <img src="https://via.placeholder.com/220x312/4169E2/FFFFFF/?text=Book-B" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div>
    <img src="https://via.placeholder.com/220x312/c4c4c4/FFFFFF/?text=Book-C" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div>
    <img src="https://via.placeholder.com/220x312/17a2b8/FFFFFF/?text=Book-D" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>
</div>

在这种情况下我可以使用 JavaScript 吗？

【问题讨论】：

如果您创建 2 个容器 div (.book-section-grid)，则可以这样做。您想要水平滚动的任何原因？
我想过这一点，但我将使用 Angular ngFor 将数据动态生成到该标签中，但首先，它必须安排在这里，我的动态不会继续自己创建 div
您的问题非常令人困惑，您说您的目标是只有一行，但“并非所有行都会在溢出时滚动。” “所有行”是什么意思？你刚才说你只想要一个。
我刚刚编辑了问题，我想现在应该更清楚了

标签： javascript html css angular

【解决方案1】：

由于您提到了角度，您可以在数组中使用数组。这样您就可以控制并拥有任意数量的水平可滚动 div。由于您将在行中工作，因此最好使用 flexbox 而不是网格。但我会在我的代码中忽略它。

堆栈闪电战

https://stackblitz.com/edit/angular-38myfi

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  data = [ ['Photographer #1', 'Photographer #2', 'Photographer #3', 'Photographer #4'], ['Photographer #5', 'Photographer #6']];
}

app.component.html

<div class="book-section-grid" *ngFor='let array of data;'>
  <div *ngFor='let item of array'>
    <img src="https://via.placeholder.com/220x312/b3d7ff/FFFFFF/?text=Book-A" alt="">
    <h4>{{item}}</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>
</div>

app.component.css

.book-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 5.5rem;
  width: 90%;
  margin: auto;
  overflow: auto;
}

.book-section-grid>div img {
  width: 100%;
}

【讨论】：