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

Posted 2023-02-24

【中文标题】桌面和移动设备上的 CSS 滚动条隐藏问题

【英文标题】：CSS scrollbars hiding issue on desktop and mobile

【发布时间】：2017-05-02 20:23:28

【问题描述】：

我正在尝试使用创建外部容器/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

【问题讨论】：

您可能想使用 javascript 来制作自定义滚动条，即不可见的滚动条。

【参考方案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*/
   

【讨论】：

如果用户从桌面查看页面，但使用的是调整大小的小型浏览器怎么办？使用上面的代码，滚动条将在桌面上可见

我认为你可以让滚动条始终存在：overflow-y:scroll; 并设置右缩进。改变答案

我做了，但问题仍然存在。移动设备的问题是它们不会显示任何物理滚动条（当用户触摸滚动时它们会弹出一个浮动滚动条，不会给容器增加任何宽度）。