个人中心
gpt4 book ai didi

css - 使用 Tailwind 时如何更改滚动条 (next.js/react)

转载 作者：行者123 更新时间：2023-12-04 13:51:05 28 4
gpt4 key购买 nike

我正在使用 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 )
但我无法理解如何更改滚动条的外观。
有人有想法吗？

最佳答案

Tailwind 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;
}

关于css - 使用 Tailwind 时如何更改滚动条 (next.js/react)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69400560/

28 4 0
文章推荐： javascript - “汇总”未被识别为内部或外部命令
文章推荐： c++ - 如何使 VSCode 缩进不带括号的 if 语句？
文章推荐： CSS:在 div 边框上覆盖图像的更好方法是什么？
文章推荐： python - 如何从 python 调用用 C 编写的 GObject 类上的方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com