Hide vertical scrollbar but still scroll for Firefox/IE/Edge

问题

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.

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.

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

Current code

.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;
        }

回答1:

All you need to do for webkit-enabled browsers is

::-webkit-scrollbar { display:none }

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.

回答2:

This will somewhat work

-ms-overflow-style: -ms-autohiding-scrollbar;

But does not hide once the user scrolls. A better method would be to place your content in a parent div where overflow is hidden, but allow scrolling within your child div.

来源：https://stackoverflow.com/questions/49180303/hide-vertical-scrollbar-but-still-scroll-for-firefox-ie-edge

标签

css

firefox

scroll

scrollbar

overflow