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

【问题标题】：Tailwind CSS: overflow-hidden does not hide a full translateTailwind CSS：溢出隐藏不隐藏完整翻译
【发布时间】：2021-08-25 03:57:06
【问题描述】：

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

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

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

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

对于解决方案，我只关注滚动条问题。 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>

【讨论】：

感谢您的帮助！虽然当我点击Run code snippet 时，出现了同样的滚动条问题。
@Mike 它在那里是因为它是一个滑块。您无法摆脱 x 滚动。否则，您必须调整标记并仅显示 1 张幻灯片或更确切地说是 1 个 div，因为它不再是幻灯片。
好的，谢谢你的澄清！我现在明白发生了什么。