如何在使用Tailwind时更改滚动条(next.js/react)
如何在使用Tailwind时更改滚动条(next.js/react)
提问于 2021-10-01 04:50:46
我正在使用Tailwind (react/next)并努力改变滚动条的外观。
这是一个单页面应用程序，我一直在尝试创建自定义CSS来应用于我的索引文件中的第一个div，如下所示：
<div className="no-scroll"> <<<<<<<--------- Adding custom css here
<Head>
<title>Oscar Ekstrand</title>
<link rel="icon" href="/images/favicon.ico" />
</Head>
<main className="flex flex-col no-scroll">
<section ref={heroref}>
<Hero scrollToContacts={scrollToContacts} />
</section>
<section ref={offeringref}>
<Offering />
</section>
<section ref={processref}>
<WhatIDo />
</section>
<section ref={biographyref}>
<CvBar />
</section>
<section ref={skillsetref}>
<Skillset />
</section>
</main>
<section ref={contactsref}>
<Footer />
</section>
</div>我可以通过“插件方法”和全局样式表，让定制的CSS类工作于按钮之类的东西。(https://play.tailwindcss.com/zQftpiBCmf)
但是我不明白如何改变我的滚动条的外观。
有谁有主意吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-10-01 17:53:13
顺风CSS没有提供一种内置的方式来定制滚动条样式。但是，您可以使用各种::-webkit-scrollbar伪元素来设置样式。
顺风游乐场链接：https://play.tailwindcss.com/5samiwyr4v。
.scrollbar::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #f7f4ed;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #e0cbcb;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #c0a0b9;
}Stack Overflow用户
发布于 2021-10-03 16:51:12
/* For Firefox Browser */
.scrollbar {
scrollbar-width: thin;
scrollbar-color: #000 #fff;
}
/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
width: 20px;
}
.scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.scrollbar::-webkit-scrollbar-thumb {
background:#000;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69400560
复制相关文章
相似问题
腾讯云开发者
