1

On my webpage I have a div with a overflow property set to auto - if content is too big, a scrollbar appears. Now I would like to make this scrollbar invisible, so that I could still scroll inside this div, but without seeing the bar. I would really appreciate some help. Also if I can't do this with CSS, I would prefer jQuery code, as I don't know javascript very well.

Here is that div:

<div id="content"><!-- some content loaded from database with php --></div>

And css for that:

#content {width:100%; overflow:auto; position:absolute; top:30px; left:0px;}
Fiodor
  • 796
  • 2
  • 7
  • 18

5 Answers5

2

I don't know of any CSS property, which allows to hide the scrollbar. But you can wrap the scrolled content into another smaller div and hide the overflowing scrollbar 

<div id="wrapper">
    <div id="content">Lorem ipsum dolor sit ...</div>
</div>

#wrapper {
    width: 282px;
    overflow: hidden;
}
#content {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
}

This creates the illusion of a scrollable content without the scrollbar. But since the scrollbars are different from one browser to another, this is most likely not portable. I tested this with Firefox 25 only.

See JSFiddle

Update:

Since your question is tagged , I looked into Element.clientWidth

Summary
clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

So, if you want to employ Javascript, you can get the content's clientWidth and set this as the wrapper's width 

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');
var cw = content.clientWidth;
wrapper.style.width = cw + 'px';

See updated JSFiddle

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
0

Sounds like a jQuery solution to me. I found this pretty quickly: http://jscrollpane.kelvinluck.com/

You can theme this plugin, so my thought would be to theme it so it doesn't show up which would still allow you to scroll using your mouse wheel etc... but without actual scrollbars.

acmb3
  • 21
  • 2
0

The answer before will probably be the best thing to do with css...

but maybe this jquery library can help you... but actually i have no idea how well it works...

https://github.com/brandonaaron/jquery-mousewheel/

Patrick Amrein
  • 135
  • 9
-1

This may or may not work, but I think trying one of these should do what you want:

overflow-y:hidden;
overflow-x:hidden;
xanesis4
  • 338
  • 1
  • 7
  • 15
  • 1
    First one makes the scrollbar disappear, but unfortunately it makes me unable to scroll at all ;/. – Fiodor Jan 05 '14 at 15:23
-1
div.scrollsaison::-webkit-scrollbar {
  width: 0px; 
}

div.scrollsaison {
  background-color: hsla(0, 0%, 20%, 0.51);
  border: 2px solid rgb(253, 253, 252);
  white-space: nowrap;
  width: 99.1%;
  overflow-y: visible;
}

div.scrollsaison a {
display: inline-block;
color: white;
text-align: center;
padding: 2%;
text-decoration: none;
font-weight: 900;
font-size: 2.2em;
font-family: -webkit-pictograph;
}

div.scrollsaison a:hover {
  border-radius: 10px;
  box-shadow: inset 0 0 1em hsl(19, 88%, 78%), 0 0 2em hsl(14, 85%, 63%);
}

<div class="bg">
      <div class="scrollsaison">
        <a href="#">Saison 1</a>
        <a href="#">Saison 2</a>
        <a href="#">Saison 3</a>
        <a href="#">Saison 4</a>
        <a href="#support">Saison 5</a>
        <a href="#blog">Saison 6</a>
        <a href="#tools">Saison 7</a>  
        <a href="#base">Saison 8</a>
        <a href="#custom">Saison 9</a>
        <a href="#more">Saison 10</a>
        <a href="#logo">Saison 11</a>
        <a href="#friends">Saison 12</a>
        <a href="#partners">Saison 13</a>
        <a href="#people">Saison 14</a>
        <a href="#work">Saison 15</a>
      </div>
</div>
eyeflux
  • 1
  • 1