Question

我知道网络上有一些与此相关的主题，但是我正在搜索一个小时，但仍然找不到解决我问题的方法。

我想做一个简单的水平滚动，就像可以在网上看到的一样，但是这样做有些麻烦。

这是我的代码：

HTML部分：

<div class="cards scrolling-wrapper">
      <div class="card-wrapper">
          <h4>Adresse</h4>
          <h5>{{ shop.name }}</h5>
          <p>{{ shop.address }}</p>
</div>
<div class="card-wrapper">
          <h4>Adresse</h4>
          <h5>{{ shop.name }}</h5>
          <p>{{ shop.address }}</p>
</div>
<div class="card-wrapper">
          <h4>Adresse</h4>
          <h5>{{ shop.name }}</h5>
          <p>{{ shop.address }}</p>
</div>
<div class="card-wrapper">
          <h4>Adresse</h4>
          <h5>{{ shop.name }}</h5>
          <p>{{ shop.address }}</p>
</div>
</div>

对于{{shop.name}}和{{shop.address}}来说，我使用的是Angular。

这是我的CSS代码：

.scrolling-wrapper{
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 20px 0px 0px 20px;
  -webkit-overflow-scrolling: touch;
}

.card-wrapper {
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.05);
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #EFEFEF;
  width: calc(100vw - 50px);
  padding: 25px 15px;
  display: inline-block;
  margin-right: 10px;

h4 {
  color: #A9A9A9;
  font-size: 14px;
  margin-bottom: 5px;
}

h5 {
  color: $darker-grey;
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 15px;
}

p {
  color: #A9A9A9;
  font-size: 16px;
  line-height: 26px;
  white-space: normal;
}
}

这样，我的卡片就可以在线显示，但是我根本无法滚动。如果我从white-space: normal;中删除了p，我可以滚动一点，像一张卡片半张，但是不能继续前进。

我该如何解决？

编辑：

我设法使其正常运行，父元素中的overflow: hidden阻止了滚动。

但是现在我遇到另一个问题，我可以在scrolling-wrapper里面滚动，但是它也可以滚动背景（地图），所以当我开始在scrolling-wrapper里面滚动时，地图继续左边，我的背景空白。

有办法避免这种情况吗？只需滚动卡片，而不是整个页面。

Answer 1

像这样给父容器溢出：

.scrolling-wrapper{
  overflow: auto;
  white-space: nowrap;
}

.scrolling-wrapper .card-wrapper{
  display: inline-block;
}

<div class="cards scrolling-wrapper">
  <div class="card-wrapper">
      <h4>Adresse</h4>
      <h5>{{ shop.name }}</h5>
      <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
  <div class="card-wrapper">
    <h4>Adresse</h4>
    <h5>{{ shop.name }}</h5>
    <p>{{ shop.address }}</p>
  </div>
</div>

Answer 2

在max-width: 100vw; padding: 20px 0; margin:0;上使用.scrolling-wrapper属性。
并给

html, body {
margin: 0;
padding: 0;
}

html, body {
margin: 0;
padding: 0;
}
.map{
  background: lightgray;
  height: 100vh;
  width: 100wh;
}

.scrolling-wrapper{
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  position: absolute;
  bottom: 0px;
  left: 0px;
  -webkit-overflow-scrolling: touch;
      max-width: 100vw;
    padding: 0;
    margin: 0;
    background: tomato;
    padding: 20px 0;
}

.card-wrapper {
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.05);
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #EFEFEF;
  width: calc(100vw - 50px);
  padding: 25px 15px;
  display: inline-block;
  margin-right: 10px;

h4 {
  color: #A9A9A9;
  font-size: 14px;
  margin-bottom: 5px;
}

h5 {
  color: $darker-grey;
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 15px;
}

p {
  color: #A9A9A9;
  font-size: 16px;
  line-height: 26px;
  white-space: normal;
}

<div class="content-wrapper">
    <div class="map-wrapper">
      <div class="map">
        
      </div>
    </div>
      <div class="cards scrolling-wrapper">
          <div class="card-wrapper">
              <h4>Adresse</h4>
              <h5>{{ shop.name }}</h5>
              <p class="address">{{ shop.address }}</p>
              <p *ngIf="shop.phone != null" class="tel">Tel : {{ shop.phone }}</p>
          </div>
        <div class="card-wrapper">
              <h4>Adresse</h4>
              <h5>{{ shop.name }}</h5>
              <p class="address">{{ shop.address }}</p>
              <p *ngIf="shop.phone != null" class="tel">Tel : {{ shop.phone }}</p>
          </div>
        <div class="card-wrapper">
              <h4>Adresse</h4>
              <h5>{{ shop.name }}</h5>
              <p class="address">{{ shop.address }}</p>
              <p *ngIf="shop.phone != null" class="tel">Tel : {{ shop.phone }}</p>
          </div>
      </div>
  </div>

CSS中的水平滚动

2 个答案: