$3.93

Hide scroll bar, but while still being able to scroll

Finally i found the solution for all browers.

CSS

.keep-scrolling {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll y axis*/
}

/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

SCSS

/SCSS for scrolling all browsers /

.keep-scrolling {
      background-color: #eee;
      width: 200px;
      height: 100px;
      border: 1px dotted black;

  /* Add the ability to scroll y axis */
  overflow-y: scroll; 

/* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  /* Hide scrollbar for Chrome, Safari and Opera */
  ::-webkit-scrollbar {
    display: none;
  }
}

HTML

<div class="keep-scrolling"> </div>

According to W3Schools, not all browsers support custom scrollbars. This means that you will have to approach the this a different way…

The only other way that I can actually think of to hide the scrollbar while still being able to scroll is to make the element have a width larger than the display size. So do something like this:

#[elements id] {
    overflow-x: hidden;
    width: calc(100% + [scrollbar width])
}

Actually, I just tried that, and it doesn’t always work… it depends what has the srollbar… so this may not be available in every browser.
You may just have to use what you had said:

::scrollbar {
    display: none;
}
/* Though, you may want to add this */
::-webkit-scrollbar {
    display: none;
}