我在 elementor 中使用自定义 css 制作了自定义水平滚动条,它适用于桌面视图但不适用于移动视图,我缺少什么?以下是我使用的自定义 css
.scroller-card {
display: flex;
flex-direction: column;
min-width: 300px;
flex-basis: 300px;
border-radius: var(--whiskey-radius);
margin: 8px;
padding: 16px;
color: var(--whiskey-color);
background-color: var(--whiskey-panel-background);
transition: all 150ms ease-out;
}
.scroller-cards {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
transform-style: preserve-3d;
perspective: 800px;
padding: 24px 0;
}
*, *:before, *:after {
box-sizing: auto;
}
.scroller-cards::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
height: 5px;
}
.scroller-cards::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: #0F2B4A;
background: #0F2B4A;
border-radius: 16px;
opacity: .5;
}
我还是编码新手所以请帮忙
在 1024px 以下的屏幕上删除
flex-wrap
。
原因:在 1024px 以下的屏幕上,卡片移动到下一行并且容器的内容宽度不大于容器的最大宽度。这就是滚动不适用的原因
您的代码不适用于 Firefox 桌面版和 Firefox 移动版。
您在此行中将滚动条宽度设置为零:
scrollbar-width: none;
稍后您将在此处设置滚动条宽度:
.scroller-cards::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
height: 5px;
}
但是因为FF不支持
-webkit-scrollbar
你的代码不起作用。
参见 caniuse.com 上的::-webkit-scrollbar