$3.93

Hide scroll bar, but while still being able to scroll

Ask a question+
1

I want to be able to scroll through the whole page, but without the scrollbar being shown.

I need to compatible for all browsers.

::-webkit-scrollbar { display: none; }

Majedur 10

Please check the answer(s) posted and mark the one that best answers your question as the answer.

Community Cop
add comment

2 Answers

0

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>

Majedur 10
add comment
1

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;
}
Batman 300
add comment

Your Answer