Tailwind CSS：溢出隐藏不隐藏完整翻译

Question

我正在使用 Tailwind CSS，但我不太明白如何删除页面底部的水平滚动条。我认为设置 overflow-hidden 可以解决问题，但由于子组件中的 translate-x-full 仍然存在滚动。有没有人发现我是如何在实现动画翻译的同时隐藏溢出的？我一直在关注 this tutorial，因此那里使用的样式也可能导致出现滚动条。感谢您的帮助！

Answer 1

问题是 100vh 太大了。只需使用 100% 或 h-full 即可。这取决于您使用的设备。这是一个将在未来解决的错误。 100vh 似乎并不是在所有屏幕上都是正确的。

如果您为移动设备开发，这尤其烦人。他们还不能使它标准化，所以在 iOS 和 Android 上你可能会得到不同的结果——这是因为 OS 和本机菜单栏。您可以在线阅读相关内容。

对于解决方案，我只关注滚动条问题。 js 部分似乎有问题。我只是添加了它，你可以看到效果。

function nextSlide() {
  let activeSlide = document.querySelector('.slide.translate-x-0');
  activeSlide.classList.remove('translate-x-0');
  activeSlide.classList.add('-translate-x-full');

  let nextSlide = activeSlide.nextElementSibling;
  nextSlide.classList.remove('translate-x-full');
  nextSlide.classList.add('translate-x-0');
}

function previousSlide() {
  let activeSlide = document.querySelector('.slide.translate-x-0');
  activeSlide.classList.remove('translate-x-0');
  activeSlide.classList.add('translate-x-full');

  let previousSlide = activeSlide.previousElementSibling;
  previousSlide.classList.remove('-translate-x-full');
  previousSlide.classList.add('translate-x-0');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet" />
<html class="h-full">

<body class="h-full">
  <div class="relative h-full">
    <div class="h-full absolute inset-0 w-screen bg-pink-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-0 slide">Hello</div>
    <div class="h-full absolute inset-0 w-screen bg-purple-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-full slide">There</div>
    <div class="h-full absolute inset-0 w-screen bg-teal-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-full slide">Booya!</div>
    <div onclick="nextSlide()" class="fixed bottom-0 right-0 bg-white w-16 h-16 flex items-center justify-center text-black cursor-pointer">&#x276F;</div>
    <div onclick="previousSlide()" class="fixed bottom-0 right-0 bg-white w-16 h-16 mr-16 border-r border-gray-400 flex items-center justify-center text-black cursor-pointer">&#x276E;</div>
  </div>
</body>

</html>

Tailwind CSS：溢出隐藏不隐藏完整翻译

Tailwind CSS: overflow-hidden does not hide a full translate

css

tailwind-css