CODEWITHSUNDEEP
htmlcss
evgeny
evgeny

Reputation: 1170

CSS hide scrollbar bar when scrolling

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".. ?

Upvotes: 2

Views: 2644

Answers (1)

thepio
thepio

Reputation: 6263

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/

Upvotes: 4

Related Questions