make only vertical scrolling invisible

Question

Hi I want to make vertical scrolling invisible, but i want to left the horizontal scrollbar visible. Also I want my page be scrollable both vertically and horizontally.

I used:

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

but it make both scrollbar invisible.

score 2 · Answer 1 · answered Dec 16 '17 at 14:08

2

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

These two CSS properties can be used to hide the scrollbars.

answered Dec 16 '17 at 14:08

Kashif Arain

21
3

Hi, as I mentioned in @Amal, I want to make vertical scrollbar hidden, and my content stay scrollable. – Arash Rabiee Dec 16 '17 at 14:18
A similar query is answered here [link] (https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) Try this. – Kashif Arain Dec 16 '17 at 14:25

score 1 · Accepted Answer · answered Dec 16 '17 at 14:49

I have to say that using simple css trick, you wont be able to achieve this.

I suggest you d use custom scrollbar plugins, by which you can simply apply css trick for each scrollbar type, like following:

$(document).ready(function() {
  $(".container").customScrollbar();
});

.container {
  max-width: 300px;
  max-height: 100px;
}

.container .overview {
  width: 800px;
}

.scrollable .scroll-bar.horizontal {
  background: #eee; height: 5px; border-radius: 20px;
}
.scrollable .scroll-bar.horizontal .thumb {
  background: #999; 
  border-radius: 20px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.css" />
<script src="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.js"></script>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
</div>

Thank you. Although it worked fine for me, but this method required to add jquery library, I wonder if is there any way with out using jquery. — Arash Rabiee, Dec 16 '17 at 15:31
@ArashRabiee Well, you can use pure javascript plugin then instead, afraid I never tried such a plugin before though. Please try to search on Google, or check this answer? https://stackoverflow.com/questions/17684304/custom-scrollbar-without-jquery — Codemole, Dec 17 '17 at 05:45

score 0 · Answer 3 · answered Dec 16 '17 at 14:08

0

Use over flow property : overflow-y: hidden

answered Dec 16 '17 at 14:08

Amal

278
1
11

Hi, property overflow-y: hidden, make that part of content which is overflowed hidden, and not scrollable, I want my vertical scrollbar be hidden, not content. my content still be scrollable, – Arash Rabiee Dec 16 '17 at 14:14

make only vertical scrolling invisible

3 Answers3