滚动鼠标时 Flexbox 行不滚动答案

【问题标题】：Flexbox row is not scrolling when I scroll the mouse滚动鼠标时 Flexbox 行不滚动
【发布时间】：2020-12-12 04:37:05
【问题描述】：

我已经使用 Flexbox 构建了一个 Netflix 行。只有当我按下 Shift + 鼠标滚动并使用开发人员工具时，我才能滚动该行。

但我希望能够在鼠标悬停/鼠标滚动时滚动/滑动该行。就像鼠标悬停在行上一样，我将能够在行中滑动/滚动。那么我该如何实现呢？

这是我的 .jsx 文件：

<div className="row">
  { /* Title */ }
  <h2>{title}</h2>
  <div className="row-posters">
    { /* Several row posters */ }
    {movies.map((movie) => {
      return (
        <img
          key={movie.id}
          onClick={() => handleClick(movie)}
          src={`${baseUrl}${
            isLargeRow ? movie.poster_path : movie.backdrop_path
          }`}
          alt={movie.name}
          className={`row-poster ${isLargeRow && "row-posterLarge"}`}
        />
      );
    })}
  </div>
  {trailerUrl && <Youtube videoId={trailerUrl} opts={opts} />}
</div>;

这是我的 CSS：

.row{
    margin-left: 20px;
    color: #FFF;
}

.row-posters{
    display: flex;
    flex: row;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 20px;
}

.row-posters::-webkit-scrollbar{
    display: none;
}

.row-poster{
    object-fit: contain;
    width: 100%;
    max-height: 100px;
    transition: transform 450ms;
    margin-right: 10px;
    cursor: pointer;
    counter-increment: row-poster;
}

.row-poster:hover{
    transform: scale(1.08);
}

.row-posterLarge{
    max-height: 250px;
}

.row-posterLarge:hover{
    transform: scale(1.09);
    opacity: 1;
}

这是我的行的图像。

【问题讨论】：

请添加 stackblitz 示例

标签： javascript html css reactjs flexbox

【解决方案1】：

您不能在灵活元素上滚动。一种方法是将 'row-posters' 包裹在 'row-posters-container' 元素中，并为该元素赋予样式

<div className="row">
  {/* title */}
  <h2>{title}</h2>
<div className="row-posters-container">
  <div className="row-posters">
    {/*  several row posters */}
    ...
  </div>
</div>
</div>
    .row-posters-container {
      max-width: 100%;
      overflow-x: auto;
    }

【讨论】：