如何在手机上显示自定义水平滚动条?

问题描述 投票:0回答:2

我在 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;
}

这是结果

我还是编码新手所以请帮忙

css elementor horizontal-scrolling
2个回答
0
投票

在 1024px 以下的屏幕上删除

flex-wrap

原因:在 1024px 以下的屏幕上,卡片移动到下一行并且容器的内容宽度不大于容器的最大宽度。这就是滚动不适用的原因


0
投票

您的代码不适用于 Firefox 桌面版和 Firefox 移动版。

您在此行中将滚动条宽度设置为零:

scrollbar-width: none;

稍后您将在此处设置滚动条宽度:

.scroller-cards::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
}

但是因为FF不支持

-webkit-scrollbar
你的代码不起作用。

参见 caniuse.com 上的::-webkit-scrollbar

© www.soinside.com 2019 - 2024. All rights reserved.