隐藏垂直滚动条，但仍在Firefox/IE/Edge上滚动 [英] Hide vertical scrollbar but still scroll for Firefox/IE/Edge

问题描述

我知道这里已经讨论了很多，但是似乎没有一种解决方案对我有用.滚动条仍显示在Windows操作系统(Firefox，Edge& IE)上.

I know this has been covered a lot here, but none of the solutions seem to work for me. The scrollbar is still showing up on Windows OS (Firefox, Edge & IE).

Note: I don't want to mess with padding/margins

我可以使其消失，但是我松开了滚动功能.这是我尝试过的一些事情，由于经历了如此多次的迭代，我可能会忘记一些事情.

I can make it disappear but I loose scroll functionality. Here are some of the things I have tried and I may forget a few since I have gone through so many iterations.

::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;

还有其他一些，但是就像我说的，没有任何作用.我确实看到一些常见的解决方案正在将填充更改为人造，从而使滚动条消失，但是我不想这样做，因为担心它可能会破坏某些设备上的样式.

There have been a few others as well, but like I said, nothing is working. I did see some common solutions being altering the padding to faux disappear the scroll bar but I don't want to do this for fear it may break styling on some devices.

我还看到了一些建议，可以使用纯JavaScript，从父组件宽度中减去子组件宽度或类似的东西，但这是一种非常相似的方法，只是动态性更高，我也不想这样做.

I also saw some suggestions to do pure javascript, subtracting child component width from parent component width or something like that but this was a very similar approach, just more dynamic which I also do not want todo.

我正在尝试使用纯CSS实现此目的.想法?

I am trying to achieve this with pure CSS. Ideas?

当前代码

.rec-left--body {
      padding: 0px 20px;
      .form-content {
        overflow-y: scroll;                // Chrome    <<  removes scrollbar
        overflow-x: hidden;                // Chrome    <<  removes scrollbar
        -ms-overflow-style: none;          // IE 10+    <<  removes scrollbar
        overflow: -moz-hidden-scrollable;  // Firefox   <<  removes scrollbar
        height: 48vh;
        margin: 10px 0px;
        padding: 0 15px;
        @media (min-width: $screen-sm) {
          height: 325px;
          padding: 0 10px;
        }
        .form-content::-webkit-scrollbar {
          width: 0px;
        }

推荐答案

启用基于Webkit的浏览器所需要做的就是

All you need to do for webkit-enabled browsers is

::-webkit-scrollbar { display:none }

我不相信在firefox中有一种纯CSS方式可以做到这一点，因为它目前不支持滚动条自定义.请参阅相关的填充方法，这可能是您唯一的选择:

I don't believe there is a pure CSS way to do this in firefox, as it doesn't currently support scrollbar customization. see related for the way to do it with padding, which might be your only option:Hide scroll bar, but while still being able to scroll.

这篇关于隐藏垂直滚动条，但仍在Firefox/IE/Edge上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！