reactjs 我无法使用tailwind实现快速滚动

mbzjlibv 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(106)

这是我的jsx代码，我试图实现快照滚动，但它不工作，我不知道我做错了什么：

<div className="w-screen flex flex-col items-center text-white snap-y overflow-scroll snap-mandatory">
  <div className=" flex items-center justify-center relative h-screen snap-start">
    <Hello />
  </div>
  <div className="w-[80%] flex flex-col items-center justify-center py-[50px] h-screen gap-[100px] snap-start">
    <Technologies />
  </div>
  <div className="w-[80%] flex flex-col items-center justify-center py-[50px] h-screen gap-[50px] snap-start">
    <Projects />
  </div>
</div>

字符串
我期望找出我做错了什么，官方文件中没有我的问题的答案

reactjs

来源：https://stackoverflow.com/questions/76826916/i-cant-implement-snap-scrolling-using-tailwind

1条答案

按热度按时间

piok6c0g1#

看起来你正在尝试使用CSS scroll-snap特性来实现快速滚动。但是，您的代码中可能存在一些问题，使其无法按预期工作。以下是一些常见的错误和可能的解决方案：
1.使用overflow-y：scroll而不是overflow-scroll，以便scroll-snap正确工作。
1.确保父容器（.w-screen）具有足够的高度，以允许捕捉到不同的部分。如果父容器的高度小于其子容器的高度之和，则滚动可能无法按预期工作。
1.确保对于要捕捉到的每个节，scroll-snap-align属性都设置为start。在代码中，您使用了snap-start作为类名，但它应该作为CSS属性应用。

<div className="w-screen flex flex-col items-center text-white overflow-y-scroll snap-y snap-mandatory">
  <div className="flex items-center justify-center relative h-screen snap-start">
    <Hello />
  </div>
  <div className="w-[80%] flex flex-col items-center justify-center py-[50px] h-screen gap-[100px] snap-start">
    <Technologies />
  </div>
  <div className="w-[80%] flex flex-col items-center justify-center py-[50px] h-screen gap-[50px] snap-start">
    <Projects />
  </div>
</div>

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs 我无法使用tailwind实现快速滚动

1条答案

相关问题

热门标签

最新问答