How to hide vertical scrollbar without hiding horizontal scrollbar and still be able to scroll?

Question

I have a grid who needs to be scrollable horizontally and vertically.

I want to hide (not disable scrolling function) vertical scrollbar only.

Tested solution 1

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

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

This solution hide all scrollbars

Tested solution 2

overflow-y: hidden

This solution prevents from scrolling

How can I hide vertical scrollbar only without losing the ability to scroll ? Is it even possible ?

Hey! Have you seen this one: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll — Kurt Lagerbier, Jul 27 '21 at 15:11
Hello. Unfortunately, the link you provided doesn't answer my question. — Sixteen, Jul 27 '21 at 15:16
Can't you take the code from the link I posted and just add: overflow-x: scroll and then also add the padding-bottom to hide the x-bar in the child element? (PS: I mean from the top answer). — Kurt Lagerbier, Jul 27 '21 at 15:24

František Vojáček · Accepted Answer · 2021-08-02T11:36:08.527

Customizing scrollbars is a cross-browser compatibility problem as Firefox limits you a lot.

For WebKit browsers you can set the width and height on scrollbars!

::-webkit-scrollbar
{
  width: 0;
  height: 8px;
}

This hides the vertical scrollbar but keeps the horizontal. It also removes default scrollbar style, so it needs to be corrected.

::-webkit-scrollbar
{
  width: 0;
  height: 1.2rem;
}

::-webkit-scrollbar-track
{
  background: white;
}

::-webkit-scrollbar-thumb
{
  background: hsl(0, 0%, 60%);
}

body
{
  width: 1500px;
  height: 1000px;
  background: url('https://random.imagecdn.app/1920/1080');
}

Interactive Code

score 0 · Answer 2 · answered Jul 27 '21 at 15:19

It's possible. Since we don't have your HTML, here's some sample HTML for the sake of the example:

<div>
  <p>scroll down!</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>scroll up!</p>
</div>

This is the CSS that would allow you too accomplish the vertical scrolling without a scrollbar(Although I don't know how well this works for accessibility):

/* hide scrollbar but allow scrolling */
div {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

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

/* other styling */
div {
  border: solid 5px black;
  border-radius: 5px;
  height: 300px;
  padding: 10px;
  width: 200px;
}

* {
  background-color: #EAF0F6;
  color: #2D3E50;
  font-family: 'Avenir';
  font-size: 26px;
  font-weight: bold;
}

Thanks for sharing. Unfortunately, the example you have provided doesn't answer my question. I want to be able to scroll horizontally and vertically, while hiding vertical scrollbar only. — Sixteen, Aug 02 '21 at 13:21

How to hide vertical scrollbar without hiding horizontal scrollbar and still be able to scroll?

2 Answers2