使用overflow-x-hidden时顺风滚动条

Question

我在一个 React 项目中使用 Tailwind，我在使用类

overflow-x-hidden

时检测到滚动错误。这个类在我的组件的 h1 元素中添加了一个垂直滚动条。请参阅附图： 屏幕截图：

实时代码可以在这里找到： https://play.tailwindcss.com/UyLgzNMRZZ

我的反应组件看起来像这样：

function App() {
  return (
    <div className='overflow-x-hidden'>
      <div>
        <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
        <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
      </div>
    </div>

  );
}

export default App;

我仍然不确定是什么导致了这个问题，我尝试了不同的浏览器，垂直滚动条出现在 Chrome 和 Firefox 中。有什么建议吗？

提前致谢，

Answer 1

这是一个持续多年的问题，它与顺风无关（请参阅另一个问题中的这个答案）。滚动条问题的出现是因为 W3C 的定义方式，而且他们似乎坚持这样做。目前，针对您的情况的唯一解决方案是每当您添加任何“x”或“y”变体时添加相反的值。

既然你有

overflow-x-hidden

，只需添加

overflow-y-hidden

，问题就应该解决了。

Answer 2

如果我没记错的话你想删除溢出x那么你只能使用

overflow-hidden

它将解决你的问题。

您的代码：

<div class='overflow-hidden'>
      <div>
        <h1 class='font-extrabold text-6xl'>asdfsdf </h1>
        <h1 class='font-extrabold text-6xl'>asdfsdf </h1>
      </div>
</div>

或 你可以这样做

w-screen

代码：

<div class='w-screen'>
      //your code
</div>

Answer 3

我也遇到了这个问题。我必须改变这个

*{
overflow-x:hidden;
}

到

 body{
overflow-x:hidden;
}

在index.css中