Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Hide scrollbar and swipe left right with CSS

I have a created a box where I want to horizontally scroll the content from left to right on mobile and I wanted to swipe using touch and hide the scrollbar, here is a working JSfiddle

Should I try any JSplugin to handle this or is this something doable easily? Please suggest

.spotlight_graphs {
  bottom: 30px;
  clear: both;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
  overflow: auto;
  position: absolute;
  right: 0;
  width: 100%;
  background-color:#cbcbcb;
  overflow:auto;
  padding:10px;
}
.spotlight_graphs > ul {
  font-size: 0;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align:left;
  width:200%;
}
.spotlight_graphs > ul > li {
  max-width: 90px;
  width: 33%;
  display:inline-block;
  background-color:#dec8c8;
  height:100px;
  margin:0 5px 5px 0;
  border:1px solid #333333;
}
.spotlight_graphs > ul > li > .graph_detail {
  color: #404040;
  float: left;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
<div class="spotlight_graphs">
  <ul>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
  </ul>
</div>

Upvotes: 4

Views: 8770

Answers (4)

vinkiss
vinkiss

Reputation: 21

Easy to do with css Webkit

html {
    overflow: scroll;
    overflow-x: hidden;
}
.spotlight_graphs::-webkit-scrollbar {
    width: 0px;  //remove scrollbar width 
    background: transparent;  //optional: it will make scrollbar invisible
}

Upvotes: 0

zed
zed

Reputation: 143

You can do it with CSS as @Stan George said.

But this css is only for mobile, because you want to disappear scrollbar in mobile, so apply css on your scrollable div.

.spotlight_graphs::-webkit-scrollbar{
    background-color:transparent;
}

it will disappear the scrollbar not scrolling.

Upvotes: 0

Stan George
Stan George

Reputation: 92

I think the easiest way to get this is using only CSS and baiscly rotating the items 90deg.

you can find it explained really well here: Here's a link! where you can find this solution explained really well.

Another solution is to place the div that has the scrollbar into another div that has a height less than the scrolling div and overflow hidden in order to cover the scrollbar like this:

.hideScroll {
  height: 129px;
  overflow: hidden;
  position: relative;
}

I edited your fiddle here: https://jsfiddle.net/xzc7khk0/6

Upvotes: 0

balapa
balapa

Reputation: 240

If you are using webkit browser such as chrome and safari, you could easiy add the following code to your CSS. Demo -> https://jsfiddle.net/xzc7khk0/5/

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

Upvotes: 3

Related Questions