Evgeny Evgeny - 3 months ago 28
CSS Question

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

Answer

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://i.ytimg.com/vi/ETDz5z46Loo/maxresdefault.jpg" />
  </div>
</div>

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