如何删除tailwind css中的水平滚动条?
Posted
技术标签:
【中文标题】如何删除tailwind css中的水平滚动条?【英文标题】:How remove the horizontal scroll bar in tailwind css? 【发布时间】:2022-01-15 19:59:33 【问题描述】:所以我在 YouTube 上的视频中尝试了 tailwindCSS v3 中的新快照功能,但是当我在本地机器上实现它时,它会在下面显示一个水平条,就像 第一张图片。 但在视频中没有水平条。 图片附在下方,但我编写的代码与视频相同。
视频参考:https://youtu.be/mSC6GwizOag?t=630
<div class="relative mt-32">
<h1 class="text-5xl font-extrabold tracking-tight text-center underline capitalize decoration-emerald-400">Get away this winter</h1>
<ul class="mt-10 pb-8 px-[50vw] w-full flex gap-8 snap-x overflow-x-auto self-center">
<li class="snap-center">
<div class="relative flex-shrink-0 max-w-[95vw] overflow-hidden rounded-3xl">
<img src="https://images.unsplash.com/photo-1542144612-1b3641ec3459?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" class="absolute inset-0 object-cover object-bottom w-full h-full " />
<div class="absolute inset-0 w-full h-full bg-gradient-to-br from-black/75"></div>
<div class=" relative h-96 w-[768px] p-12 flex flex-col justify-between items-start">
<div>
<p class="font-medium text-stone-50">Destination</p>
<h2 class="w-2/3 mt-3 text-3xl font-semibold tracking-tight text-white">amit deka</h2>
</div>
<a href="#" class="px-4 py-3 text-sm font-medium bg-white rounded-lg text-slate-900"> browse</a>
</div>
</div>
</li>
<li></li>*4 times
</ul>
</div>
【问题讨论】:
【参考方案1】:我目前也在试验一般的滚动捕捉功能和 tailwindcss。我通过添加一个额外的 CSS 类摆脱了滚动条,因为我还没有找到相应的顺风类。
/* Hide scrollbar for Chrome, Safari and Opera */
.container-snap::-webkit-scrollbar
display: none;
/* Hide scrollbar for IE, Edge and Firefox */
.container-snap
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
因此,对于您的代码,当您将 .container-snap 类添加到 ul 元素时,滚动条将消失:
<div class="relative mt-32">
<h1 class="text-5xl font-extrabold tracking-tight text-center underline capitalize decoration-emerald-400">Get away this winter</h1>
<ul class="container-snap mt-10 pb-8 px-[50vw] w-full flex gap-8 snap-x overflow-x-auto self-center">
<li class="snap-center">
<div class="relative flex-shrink-0 max-w-[95vw] overflow-hidden rounded-3xl">
<img src="https://images.unsplash.com/photo-1542144612-1b3641ec3459?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" class="absolute inset-0 object-cover object-bottom w-full h-full " />
<div class="absolute inset-0 w-full h-full bg-gradient-to-br from-black/75"></div>
<div class=" relative h-96 w-[768px] p-12 flex flex-col justify-between items-start">
<div>
<p class="font-medium text-stone-50">Destination</p>
<h2 class="w-2/3 mt-3 text-3xl font-semibold tracking-tight text-white">amit deka</h2>
</div>
<a href="#" class="px-4 py-3 text-sm font-medium bg-white rounded-lg text-slate-900"> browse</a>
</div>
</div>
</li>
<li></li>*4 times
</ul>
【讨论】:
【参考方案2】:您可以使用以下代码:
overflow-x-hidden
【讨论】:
我应该在哪里使用这个类? 第三行代码 是的,我已经在 ul 元素中添加了它,现在我无法水平滚动它。以上是关于如何删除tailwind css中的水平滚动条?的主要内容,如果未能解决你的问题,请参考以下文章