CSS 仅限移动设备水平滚动

Question

我正在尝试仅在移动设备上添加水平滚动条，但我所做的媒体查询在移动设备上不显示：

@media (min-width:480px) {   
    ::-webkit-scrollbar {
        height: 4px;
        width: 4px;
        overflow: visible;
        border: 1px solid #d5d5d5;
    }

    ::-webkit-scrollbar-track {
        border-radius: 0;
        background: #eeeeee;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 0;
        background: #b0b0b0;
    }
}

进入移动端好像没有触发。

我做错了什么？

Answer 1

首先，正如 Aman 所指出的，@media (min-width:480px) {} 将在 大于 480px 的屏幕上触发。如果您想要在 460 像素以下触发查询，请尝试 @media (max-width: 480px) {}.

其次，您的 CSS 代码是样式滚动条而不是 activating/deactivating 滚动条，这是我理解您需要的。

要仅在移动设备上激活水平滚动，请尝试：

.selector {
    overflow-y: auto;
    overflow-x: auto;  /* <-- this enables horizontal scroll */
}

@media (min-width: 480px) { /* <-- For screens bigger than 480px */
    .selector {
        overflow-x: hidden;  /* <-- this disables it */
    }
}

CSS 仅限移动设备水平滚动

CSS horizontal scroll mobile only

css

scroll