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

Question

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

我在 IE 中遇到问题，滚动条出现在屏幕上，我无法在不失去滚动效果的情况下隐藏它。

有什么想法吗？

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

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

我用我的代码制作了一个 js fiddle。

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

Answer 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 中的结果：

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

Hide scrollbar in IE 11, but achieve IE effect

css

internet-explorer

scroll

overflow

scrollbar