如何在Google Chrome浏览器的可滚动容器中实现元素的反向堆叠？

debugcn 发表于 Dev

脊柱发育

通过下面的代码，我已经达到了我想要的效果，但是它似乎只能在Firefox和Edge中工作。在Chrome中，元素可以根据需要进行堆叠，但是没有水平滚动条，因此最右边的项目是隐藏的，用户无法访问。

如您所见，页眉和页脚保持不变，而my-app元素是唯一可滚动的部分。左侧的项目显示在右侧项目的上方，而一直到右侧的项目可通过滚动获得。

body {
  margin: 0;
  height: 100vh;
}

my-app {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

header, footer {
  height: 25px;
  background-color: black;
  color:white;
}

main {
  display: flex;
  flex-direction: row-reverse;
  flex-grow: 1;
  justify-content: flex-end;
  margin: 0;
  overflow-x: auto;
  width: 100vw;
}

.card {
  --card-height: 200px;
  --card-width: 250px;

  align-items: center;
  background: linear-gradient(rgba(179, 156, 95, 1), rgba(150, 117, 24, 1));
  border-radius: 5px;
  box-shadow: 1.5rem 0 2rem #222;
  color: #000;
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  justify-content: center;
  min-width: var(--card-width);
  position: relative;
  text-align: center;
  transition: all .15s ease-in-out;
  transition: margin .3s ease-in-out;
  width: var(--card-width);
}

.card:not(:last-of-type) {
    margin-left: calc(var(--card-width) * -.5);
}

.card:hover:not(:last-of-type) {
    margin-left: 0;
}

<my-app>
  <header>Header</header>
  <main>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
    <div class="card">11</div>
    <div class="card">12</div>
    <div class="card">13</div>
    <div class="card">14</div>
    <div class="card">15</div>
  </main>
  <footer>Footer</footer>
</my-app>

如果我将应用于main的css更改为：

main {
  ...
  flex-direction: row;
  ...
  justify-content: flex-start;
  ...
}

然后出现滚动条，但未正确堆叠物品（右侧的物品与左侧的物品重叠）。

如果我走一步，并添加direction: rtl;到main风格为好，布局按预期工作，但默认滚动位置一路到屏幕的右侧（这是有道理的）。我可能可以保留此代码，并添加一些JavaScript来更改页面加载时的滚动位置，但这些操作似乎都非常hacky。有没有更好的方法来实现我正在寻找的布局，该布局可以在Chrome，Firefox和Edge中使用？

科什

看起来像一个额外的包装器可以解决您的问题：

body {
  margin: 0;
  height: 100vh;
}

my-app {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

header,
footer {
  height: 25px;
  background-color: black;
  color: white;
}

main {
  flex-grow: 1;
  margin: 0;
  overflow-x: auto;
  width: 100vw;
}

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.card {
  --card-height: 200px;
  --card-width: 250px;
  align-items: center;
  background: linear-gradient(rgba(179, 156, 95, 1), rgba(150, 117, 24, 1));
  border-radius: 5px;
  box-shadow: 1.5rem 0 2rem #222;
  color: #000;
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  justify-content: center;
  min-width: var(--card-width);
  position: relative;
  text-align: center;
  transition: all .15s ease-in-out;
  transition: margin .3s ease-in-out;
  width: var(--card-width);
}

.card:not(:last-of-type) {
  margin-left: calc(var(--card-width) * -.5);
}

.card:hover:not(:last-of-type) {
  margin-left: 0;
}

<my-app>
  <header>Header</header>
  <main>
    <div class="wrapper">
      <div class="card">1</div>
      <div class="card">2</div>
      <div class="card">3</div>
      <div class="card">4</div>
      <div class="card">5</div>
      <div class="card">6</div>
      <div class="card">7</div>
      <div class="card">8</div>
      <div class="card">9</div>
      <div class="card">10</div>
      <div class="card">11</div>
      <div class="card">12</div>
      <div class="card">13</div>
      <div class="card">14</div>
      <div class="card">15</div>
    </div>
  </main>
  <footer>Footer</footer>
</my-app>