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

【问题标题】：How to change scrollbar when using Tailwind (next.js/react)使用 Tailwind (next.js/react) 时如何更改滚动条
【发布时间】：2021-11-22 18:54:24
【问题描述】：

我正在使用 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)

但我不明白如何更改滚动条的外观。

有人有想法吗？

【问题讨论】：

标签： css reactjs next.js tailwind-css

【解决方案1】：

Tailwind CSS 不提供自定义滚动条样式的内置方式。但是，您可以使用各种 ::-webkit-scrollbar 伪元素对其进行样式设置。

Tailwind 游乐场链接：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;
}

【讨论】：

谢谢！！如果这有意义的话，我非常坚决地要删除整个页面的默认滚动条。我自己的试验和错误中也缺少关于 Tailwind 溢出-y-scroll 的部分！

【解决方案2】：

/* 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;
}

【讨论】：

【解决方案3】：

yarn add -D tailwind-scrollbar

或

npm install --save-dev tailwind-scrollbar

然后

plugins: [
    // ...
    require('tailwind-scrollbar'),
],

样本

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
    <div class="h-64"></div>
</div>

变体

variants: {
    // ...
    scrollbar: ['dark']
}

例如，如果您想更改滚动条的宽度，您可以在 tailwind.css

中自定义

@layer utilities {
  .scrollbar-medium::-webkit-scrollbar {
    width: 12px;
  }
}

然后

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
    <div class="h-64"></div>
</div>

滚动条只有一种样式，滚动条很细……所以请以这种方式自定义

【讨论】：