CSS hide scrollbar bar when scrolling

Question

I want horizontal overflow and when the screen width is not that wide the DIV starts scrolling right - left, but I want it to look not that ugly I have it right now (scrollbars in the bottom of the div).

.wrapper {
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
}

.content {
    margin: 0 auto;
    width: 1198px;
}

HTML

<div class=wrapper>
  <div class=content">
    My content here.. 
  </div>
</div>

And the other question - is there setting for CSS what allows "swipe" for the div instead of "drag and move".. ?

set overflow-x:auto to enable scrolling only when there is content overflow — Kristijan Iliev
– Kristijan Iliev, Commented Aug 25, 2016 at 12:14
don't set width in px set the width in percentage width:100%; it helps your div fit to screen — Joyson
– Joyson, Commented Aug 25, 2016 at 12:15
@Chris not really what I need, I don't care if it scollable when not that wide.. I just don't like those scroll bar when scroll is in action. — evgeny
– evgeny, Commented Aug 25, 2016 at 12:15
then you gotta use custom scrollbar, there are many libraries for this you can google for — Kristijan Iliev
– Kristijan Iliev, Commented Aug 25, 2016 at 12:16
Oh you want to be able to scroll but don't show the scrollbar. — cjmling
– cjmling, Commented Aug 25, 2016 at 12:18

thepio · Accepted Answer · 2021-08-17 14:24:46Z

4

For a pure CSS solution with browser support you could use the combination of ::-webkit-scrollbar and some padding like this:

.wrapper {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-right: 17px; /* This hides the right scrollbar */
    padding-bottom: 17px; /* This hides the bottom scrollbar */
}

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

<div class="wrapper">
  <div class="content">
    <img src="https://via.placeholder.com/1500x700" />
  </div>
</div>

Better to play around with in JSFiddle: https://jsfiddle.net/thepio/pavb2hfy/

edited Aug 17, 2021 at 14:24

answered Aug 25, 2016 at 12:31

thepio

6,2635 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

evgeny Over a year ago

Amazing! I think I was looking for this.. What about cross-browser support? I just checked on Chrome, Safari and FF (all OS X), but others .. ?

thepio Over a year ago

Well, you know I just tested with those exact browsers and OS myself also. I don't have the equipment to test on other browsers/OS right now but if you do test them please let me also know of the results. I would imagine this working on most of them. If you want to make sure it's cross-browser I would suggest some plugin.

FlySoFast Over a year ago

YOU'RE THE MAN!

Collectives™ on Stack Overflow

CSS hide scrollbar bar when scrolling

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related