CODEWITHSUNDEEP
css
Sixteen
Sixteen

Reputation: 563

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

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 ?

Upvotes: 2

Views: 1885

Answers (2)

František Vojáček
František Vojáček

Reputation: 174

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

Upvotes: 1

Luke Poirrier
Luke Poirrier

Reputation: 166

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

Upvotes: 0

Related Questions