桌面和移动设备上的 CSS 滚动条隐藏问题

Question

我正在尝试使用创建外部容器/w hidden overflown 和具有负边距的内部容器的经典方法隐藏垂直滚动条，如下所示：

.Wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
}

.Items {
    display:block;
    margin-right:-17px; /* Scrollbar's width */
    overflow-y:scroll;
    overflow-x:hidden;
}

当我在台式机/笔记本电脑上查看滚动条时，它们确实是隐藏的。

不幸的是，我发现触控移动设备（手机/平板电脑）不显示滚动条。相反，当您触摸滚动时，会弹出一个小滚动条。问题是这些滚动条不会像桌面上的滚动条（17px）那样增加任何额外的宽度，所以我最终将负边距拉到边框之外并隐藏了 17px 的内容。

我也尝试absolute定位内部容器.Items但是我得到了相同的结果:(

.Items {
    position:absolute;
    top:0;
    left:0;
    right:-17px;
}

我正在考虑进行一些浏览器嗅探，以便在用户从移动设备查看网页时删除负边距，但我知道这是一种不好的做法。

有没有办法用纯 CSS 来修复它？

Problem preview

Answer 1

您可以通过@media 查询为小视口定义样式。 您需要在 css 规则的末尾添加下一个代码：

@media screen and (max-width: 992px) {
   .Items {
       position:absolute;
       top:0;
       left:0;
       right: -17px;
       overflow-y: scroll;
/* any style in this section will afect on Items
   on mobile and tablets with screen width less than 993px*/
   }
}