时间戳

首页 > 解决方案 > 溢出-x 不会滚动整个宽度

html - 溢出-x 不会滚动整个宽度

问题描述

我正在开发纸牌游戏，如果窗口宽度不够宽，我需要能够滚动浏览所有纸牌。

HTML：

 <div id="hand">
    <div class="wrapper">
      <div class="card">
        <!-- Cards content -->
      </div>
      <div class="card">
        <!-- Cards content -->
      </div>
      <div class="card">
        <!-- Cards content -->
      </div>
      <!-- Repeat until 20 cards -->
    </div>
 </div>

SCSS

    div#hand {
        position: fixed;
        bottom: -200px;
        left: 0;
        width: 100vw;
        height: auto;
        display: flex;
        justify-content: center;
        overflow-x: auto;
        overflow-y: visible;

        >div.wrapper {
            display: flex;
            flex-direction: row;
            margin-left: 200px;
            margin-right: 200px;

            div.card {
                cursor: pointer;
                position: relative;
                width: 230px;
                height: 350px;
                margin: 0;
                border-radius: 3px;
                border-style: dotted;
                border-width: 5px;
                border-color: #fff;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
                margin-top: 60px;
                bottom: 0;
                display: inline-block;

                transition: 0.4s;

                &:not(:first-child) {
                    margin-left: -160px;
                }

                &:hover:not(:last-child) {
                    margin-right: 160px;
                }

                &:hover {
                    bottom: 60px;
                }
            }
        }
    }

这导致呈现以下内容： 正在渲染的卡片

这很酷，但当我缩小浏览器宽度时，问题就来了： 卡片未正确渲染

我目前一直滚动到左侧，但请注意第一张图片上的第一张卡片是如何不可见的。如果我向右滚动，最后一张卡片将毫无问题地显示： 右边的卡片看起来不错

有没有办法让滚动条真正滚动浏览每张卡片？我尝试向左右添加边距或向父 div 添加填充，但似乎没有任何效果：c

提前感谢您的帮助^^

标签： htmlcsswebscrolloverflow

解决方案

我找到了您问题的答案，它与您的原始代码具有相同的风格。我添加了一些演示编号进行测试。

div#hand {
  position: fixed;
  bottom: -200px;
  left: 0;
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overflow-y: auto;
}
div.wrapper {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.card {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div#hand > div.wrapper div.card {
  cursor: pointer;
  position: relative;
  width: 230px;
  height: 350px;
  margin: 0;
  border-radius: 3px;
  border-style: dotted;
  border-width: 5px;
  border-color: #fff;
  background-color: black;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  margin-top: 60px;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}
div#hand > div.wrapper div.card:not(:first-child) {
  margin-left: -160px;
}
div#hand > div.wrapper div.card:hover:not(:last-child) {
  margin-right: 160px;
}
div#hand > div.wrapper div.card:hover {
  bottom: 60px;
}
Code

 <div id="hand">
   <div class="wrapper">
     <div class="card">
       <h2>1</h2>
     </div>
     <div class="card">
       <h2>2</h2>
     </div>
     <div class="card">
       <h2>3</h2>
     </div>
     <div class="card">
       <h2>4</h2>
     </div>
     <div class="card">
       <h2>5</h2>
     </div>
     <div class="card">
       <h2>6</h2>
     </div>
     <div class="card">
       <h2>7</h2>
     </div>
     <div class="card">
       <h2>8</h2>
     </div>
     <div class="card">
       <h2>9</h2>
     </div>
     <div class="card">
       <h2>10</h2>
     </div>
     <div class="card">
       <h2>11</h2>
     </div>
     <div class="card">
       <h2>12</h2>
     </div>
     <div class="card">
       <h2>13</h2>
     </div>
     <div class="card">
       <h2>14</h2>
     </div>
     <div class="card">
       <h2>15</h2>
     </div>
     <div class="card">
       <h2>16</h2>
     </div>
     <div class="card">
       <h2>17</h2>
     </div>
     <div class="card">
       <h2>18</h2>
     </div>
     <div class="card">
       <h2>19</h2>
     </div>
     <div class="card">
       <h2>20</h2>
     </div>
   </div>
 </div>
 </div>

推荐阅读