禁用水平滚动，其中元素大于视口

Question

我试图创建一些类似于谷歌播放导航的东西，带有固定数量的og标签（应用程序浏览中的swyping）。

我创建了一个包含一些内容div的div。

<div id="container">
    <div class="section"> ... </div>
    <div class="section"> ... </div>
    <div class="section"> ... </div>
</div>

要在各部分之间创建滑动，我将容器设置为300％的宽度 然后我根据按下的按钮设置容器的左侧属性。

我的问题是：如何禁用视口的水平滚动？

Answer 1

您有两种解决方案：

1. 将#container包裹在另一个<div>内，其宽度为100％，禁用换行和溢出：隐藏，然后在其中滚动#container或

2. 将overflow: hidden放在视口上（或尝试使用overflow-x:hidden);