IE 11隐藏滚动条，但实现IE效果答案

【问题标题】：Hide scrollbar in IE 11, but achieve IE effectIE 11隐藏滚动条，但实现IE效果
【发布时间】：2021-02-27 22:24:12
【问题描述】：

我的网站中有一个包含多个项目的导航。根据屏幕大小，许多项目可以在屏幕外，用户可以滚动浏览。

我在 IE 中遇到一个问题，滚动条出现在屏幕上，我无法隐藏它而不会失去滚动效果。

有什么想法吗？

我在 chrome 中使用以下内容来隐藏我的滚动条

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

我用我的代码做了一个 js fiddle。

https://jsfiddle.net/6p1Lnosa/4/

【问题讨论】：

标签： css internet-explorer scroll scrollbar overflow

【解决方案1】：

是否要在 IE 11 中滚动 x 轴上的内容？如果有，可以参考以下方法：

在父 div 中，当我们以编程方式更改子滚动条位置时，我们可以隐藏滚动条并防止再次显示它：将其框限制设置为 -ms-scroll-limit: 0 0 0 0：
```
#parent_div:{
overflow: hidden; 
-ms-scroll-limit:0 0 0 0; /* IE 11 */
}
```
在子 div 中，我们可以隐藏滚动条并以编程方式控制滚动条：
```
#child_div:{
  -ms-overflow-style: none; /* IE 11 */
}
```

我在您的代码中编辑以下部分，然后它可以在 IE 中实现您想要的：

.desktop-nav {
    margin-bottom: 40px;
    /*overflow: scroll;*/
    overflow: hidden;
    -ms-scroll-limit: 0 0 0 0; /* IE 11 */
}

.desktop-nav ul {
    font-weight: bold;
    padding-bottom: 14px;
    overflow-x: visible;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none; /* IE 11 */
 }

在 IE 11 中的结果：

【讨论】：