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

Question

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

cd dsfkjhgfkdshjajklhdaf

当我在桌面/笔记本电脑上查看滚动条时，确实隐藏了滚动条。

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

我还尝试.Wrapper { width:100%; height:100%; overflow:hidden; } .Items { display:block; margin-right:-17px; /* Scrollbar's width */ overflow-y:scroll; overflow-x:hidden; } 定位内部容器absolute 但是我得到了相同的结果：（

.Items

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

有没有办法用纯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*/
   }
}