如何创建不剪切内容的可滚动容器？
如何创建不剪切内容的可滚动容器？
提问于 2022-09-16 14:08:51
我目前正在尝试为我的网站创建一个水平卡片行。这些卡片有一个小小的过渡，它们在悬停时轻轻旋转和上升，如下所示：
我想使行在水平轴上滚动以使其响应，但在设置容器上的overflow-x: auto;之后，我注意到卡现在被剪裁了，使得悬停效果看起来非常糟糕。
我尝试过在容器上设置overflow-y: visible;，但没有任何效果。有什么办法可以让我的卡不夹，但仍然让集装箱滚动？？提前谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2022-09-24 00:20:29
您应该将元素封装在2个div中。第一个和内部将有一个宽度(对于水平滚动)大于视口。而第二个和外部的div，将有一个宽度，这是完全相同的视口。然后，第二个div将拥有属性overflow-x: scroll; overflow-y: hidden，并且它应该可以工作。示例：
body {
width: 100vw;
height: 100vh;
}
outer-wrapper {
width: 100vw;
height: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
inner-wrapper {
width: 150vw;
height: 100px;
display: flex;
}
cards {
// what ever properties you want
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73746071
复制相关文章
相似问题
腾讯云开发者
