css 停止固定覆盖层下的元素使用Tailwind滚动

jv4diomz 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(143)

我试图创建一个覆盖，可能包含自己的滚动条。覆盖层应该占据屏幕的整个宽度和高度，如果内容比页面高度长，则滚动它自己的内容。
我的问题是，我不知道如何阻止实际页面滚动时，覆盖滚动。我想让它像Bootstrap模式一样。
下面是一个代码示例：https://jsfiddle.net/r5jLcekb/
在示例中，我使用：

fixed bg-black bg-opacity-50 w-screen h-screen overflow-y-scroll

正如你所看到的，页面滚动它的内容，而不仅仅是覆盖。我只想让覆盖图中的内容滚动。这是否可能做到纯粹的顺风？

css

来源：https://stackoverflow.com/questions/65864936/stop-element-underneath-fixed-overlay-from-scrolling-with-tailwind

4条答案

按热度按时间

mwngjboj1#

我认为您正在寻找overscroll-auto--请参阅https://tailwindcss.com/docs/overscroll-behavior了解更多信息。

赞(0）回复(0）举报 2023-06-25

llycmphe2#

我解决这个问题的方法是，每当呈现这个覆盖时，就向主体添加一个类。每当你的overlay元素被挂载时，你都需要执行一段JavaScript代码来执行以下操作：

document.body.classList.add(`overflow-hidden`);
    document.body.style.marginRight =
      document.body.offsetWidth - widthBefore + "px";

第二个赋值是可选的，添加它是为了消除滚动条显示和隐藏时的布局偏移

赞(0）回复(0）举报 2023-06-25

uelo1irk3#

我也有同样的问题。当全屏覆盖处于活动状态时，我的父容器正在滚动整个站点，但内容没有在全屏覆盖中滚动。我在固定容器中添加了overflow-y-scroll和overscroll-y-none，效果很好。希望这能节省一些时间：）感谢Jas（上面的评论）的观点。
参见https://tailwindcss.com/docs/overflow和https://tailwindcss.com/docs/overscroll-behavior

赞(0）回复(0）举报 2023-06-25

uxh89sit4#

您可以将overscroll-contain与overflow-scroll、overflow-x-scroll或overflow-y-scroll结合使用，这将阻止父级同时滚动。🤘

参考：https://tailwindcss.com/docs/overscroll-behavior

赞(0）回复(0）举报 2023-06-25