2

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;
        }
vin_Bin87
  • 318
  • 8
  • 18

3 Answers3

5

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.

Julian Tennyson
  • 74
  • 6
  • I have also tried `display:none` there to no avail. Is my syntax correct in my provided code snippet at the end of my post above? Just swap out `width` for `display` but otherwise, if I am declaring it correctly, than that just means it isn't working. – vin_Bin87 Mar 08 '18 at 19:12
  • Huh, odd. That syntax should work fine, but again it will only work for webkit-enabled browsers like safari and chrome. The times I have used it it has been top-level on my css, I've never tried nesting it so that may be your issue. – Julian Tennyson Mar 08 '18 at 19:47
  • 3
    `scrollbar-width: none` in firefox 64+ – alvinmeimoun Jan 15 '19 at 15:32
0

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.

awtrimpe
  • 56
  • 4
0

I know you said you did not want to mess with padding or margins, but I felt the same, I tried everything and what worked best for my solution was to always have the vertical scrollbar show, and then add some negative margin to hide it.

This worked for IE11, FF60.9 and Chrome 80

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}
scrub
  • 21
  • 3