使用平移变换停止水平滚动

Question

使用 Bootstrap 4，我有一个侧边栏，我想在单击按钮时 show/hide。我在桌面上运行得很好，它隐藏了侧边栏，主要内容区域占据了 space:

的其余部分

HTML:

<a class="sidebar-toggle" href="#"><i class="fa fa-bars"></i></a>

<div class="d-flex wrapper">
    <div class="sidebar sidebar-dark bg-dark">
        <ul class="list-unstyled">
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
        </ul>
    </div>

    <div class="content m-4">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS:

.sidebar {
    min-width: 220px;
    max-width: 220px;
    min-height: calc(100vh - 56px);
}
.wrapper-toggled .sidebar {
    margin-left: -220px;
}

JS:

$(document).on('click', '.sidebar-toggle', function (event) {
    event.preventDefault();
    $('.wrapper').toggleClass('wrapper-toggled');
});

我的问题是我希望在移动设备上的行为略有不同。默认情况下，侧边栏应隐藏，并在单击按钮时显示。当侧边栏显示时，我希望它把所有东西都移到右边。我有这个工作，但它会导致水平滚动条以显示其余的截断 .content 内容。

这是相关代码：

@media (max-width: 768px) {
    .sidebar {
        margin-left: -220px;
    }
    .wrapper-toggled {
        transform: translate(220px, 0);
    }
}

我试过在正文中添加 overflow-x: hidden 和 .wrapper class，但是没有用。

此外，当侧边栏显示时，它似乎搞砸了移动设备上的总视口高度。侧边栏显示时页面高度增加。

有更好的方法吗？我该如何解决这个问题？

Answer 1

将 overflow-x: hidden 添加到 body 和 html 似乎已经解决了问题。

Answer 2

添加overflow-x:hiddencss元素隐藏横条

body {
   overflow-x:hidden
}

body {
overflow-x:hidden

}

.post {
  margin: 60px 80px;
  padding: 60px;
  border: 1px solid black;
  border-radius: 8px;
 
  transition: 0.6s;
  transform: translateX(100px);
}

<div class="post">
        <h1>Post 1</h1>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo neque
          aliquid, quaerat doloremque porro aperiam eaque, sapiente eligendi
          iste, qui veritatis consectetur nobis maiores.
        </p>
      </div>

使用平移变换停止水平滚动

Stop horizontal scrolling with translate transform

css

twitter-bootstrap

bootstrap-4

responsive