反应，Nextjs，TailwindCSS。滚动不起作用答案

【问题标题】：React, Nextjs, TailwindCSS. Scroll not working反应，Nextjs，TailwindCSS。滚动不起作用
【发布时间】：2022-02-18 23:29:38
【问题描述】：

我面临一个问题，即在 React Next.js 中，我无法垂直获得滚动条。这是我的代码：

        <div className=" hover:bg-violet-400 box-content overflow-y-scroll w-4000">
          <div ref={scrollRef}>
            {message.map((m) => (
              <Message
                message={m}
                own={m.sender === sender[0]._id}
              />
            ))}
          </div>
        </div>

我在这个项目中使用 Tailwind Css。 “溢出-y-滚动”不起作用。即使此属性为空，溢出仍然发生。

【问题讨论】：

如果您的意思是当您的消息数组为空时滚动条仍然出现，您可以尝试使用实用程序类overflow-y-auto 而不是overflow-y-scroll。

标签： reactjs scroll next.js scrollbar tailwind-css

【解决方案1】：

您需要定义div 的高度，以使您的内容在其中可滚动。而且我刚刚注意到您使用了w-4000，这不是顺风课程。所以也要改变它。

【讨论】：

【解决方案2】：

您应该删除w-4000 并添加w-screen 然后如果您的内容占用的空间大于宽度，则垂直滚动条将可用

【讨论】：