Question

我有一些列表要在台式机上一行显示，但是在移动设备上，我必须显示相同的列表，但是应该可以通过滑动来水平滚动。

我使用CSS尝试了以下代码。它正在工作，但我不想在滚动时显示水平滚动条。另外，我使用的是Bootstrap 4，因此我将列表添加到了容器中。

您能帮我吗？

<Menu >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <MenuItem Header="Item1" />
        <Separator Grid.Row="1" />
        <MenuItem Grid.Row="2" Header="Item2" />
    </Grid>
</Menu>

.aboutlinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutlinks ul li {
  display: inline-block;
  margin: 15px;
  border: 1px solid #000;
}

.aboutlinks ul li a {
  padding: 6px 25px;
  display: block;
}

@media all and (max-width: 768px) {
  .aboutlinks ul {
    display: flex;
     overflow-x: hidden;
  }
}

Answer 1

overflow-x: hidden;将解决您的问题。在身体上，而不是在容器上。请参阅下面的更新的答案：

.aboutlinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutlinks ul li {
  display: inline-block;
  margin: 15px;
  border: 1px solid #000;
}

.aboutlinks ul li a {
  padding: 6px 25px;
  display: block;
}

@media all and (max-width: 768px) {
  body{
    overflow-x: hidden; // add this part
  }
  .aboutlinks ul {
    display: flex;
    //dont put any overflow here
  }
}

<div class="aboutlinks">
  <ul class="smothscrollclass">
    <li><a href="" class="">ABCDE</a></li>
    <li><a href="">FGHIJ</a></li>
    <li><a href="">KLMNO</a></li>
    <li><a href="">PQRST</a></li>
    <li><a href="">UVWX</a></li>
    <li><a href="">XY</a></li>
  </ul>
</div>

Answer 2

使用::-webkit-scrollbar CSS伪元素（对于Webkit浏览器）和scrollbar-color属性（对于Firefox）

.aboutlinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutlinks ul li {
  display: inline-block;
  margin: 15px;
  border: 1px solid #000;
}

.aboutlinks ul li a {
  padding: 6px 25px;
  display: block;
}

@media all and (max-width: 768px) {
  .aboutlinks ul {
    display: flex;
    overflow-x: auto;
  }
  .no-scrollbar {
    scrollbar-color: transparent transparent;  
  }
  .no-scrollbar::-webkit-scrollbar {
    height: 0px;
  }
  .no-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  }
  .no-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  }
  .no-scrollbar::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0);
  }
}

<div class="aboutlinks">
  <ul class="smothscrollclass no-scrollbar">
    <li><a href="" class="">ABCDE</a></li>
    <li><a href="">FGHIJ</a></li>
    <li><a href="">KLMNO</a></li>
    <li><a href="">PQRST</a></li>
    <li><a href="">UVWX</a></li>
    <li><a href="">XY</a></li>
  </ul>
</div>

注意：使用shift + mouse wheel或touch gesture滚动

在移动设备中滚动时如何隐藏水平滚动条

2 个答案: