为 css 中的手机制作水平滚动区域

Question

我想为手机创建一个水平滚动区域。我希望它是这样的：

我也想隐藏滚动条。

我试过了，但是有一个问题，我不能给它们宽度！

      <div style="overflow: auto hidden; display: flex;" id="v">
        <div>
          <img src="url" style="width: 100%; height: 20%;" alt="">
          <p>name</p>
        </div>
      </div>

Answer 1

使滚动条水平

.container {
    overflow: auto hidden;
};

要隐藏滚动条，请使用：

.container::-webkit-scrollbar {
     display: none;
}

Answer 2

也许有帮助。使用 overflow: auto;

#carousel {
    width: 80%;
    height: 200px;
    background-color: green;
    
    overflow: auto;
    white-space:nowrap;
}

#carousel .slide {
    display: inline-block;
}

<div id="carousel">
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
      <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>  
</div>

为 css 中的手机制作水平滚动区域

Making a horizental scroll area for the mobiles in css

html

javascript

css

bootstrap-4