使用overflow-x-hidden时在顺风上显示滚动条
使用overflow-x-hidden时在顺风上显示滚动条
提问于 2021-11-28 05:31:45
我在react项目中使用Tailwind时，在使用overflow-x-hidden类时检测到滚动错误。该类在我的组件的h1元素中添加一个垂直滚动条。见下图:屏幕截图：
可以在以下位置找到实时代码：https://play.tailwindcss.com/UyLgzNMRZZ
我的react组件如下所示：
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中。有什么建议吗？
提前谢谢你，
回答 2
Stack Overflow用户
发布于 2021-11-29 08:52:10
这是一个多年来一直存在的问题，与顺风无关(请参阅另一个问题中的this answer )。滚动条问题的出现是因为W3C定义的方式，似乎他们坚持这样做。目前，对于您的情况，唯一的解决方案是在添加任何"x“或"y”变体时添加相反的值。
既然你有overflow-x-hidden，只需添加overflow-y-hidden，这个问题就应该解决了。
Stack Overflow用户
发布于 2021-11-29 10:05:08
如果我没记错，你想删除溢出的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70140908
复制相关文章
相似问题
腾讯云开发者
