时间戳

首页 > 解决方案 > 滚动鼠标时 Flexbox 行不滚动

javascript - 滚动鼠标时 Flexbox 行不滚动

问题描述

我使用 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;
}

这是我的行的图像。

JavaScript

标签： javascripthtmlcssreactjsflexbox

解决方案

您不能在灵活元素上滚动。一种方法是将 '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;
    }

推荐阅读