remove scroll-bar yet still have controllable content

Question

Ok, so I want the left side div to have scrolable content, i tried overflow: hidden and auto yet they don't quite do the trick. There is still a scroll-bar showing.

Here is the JSFiddle with HTML and CSS: http://jsfiddle.net/yukimura/Sgq4j/

I'm not sure what you want... You want to have scrolable content but without scroll-bar? — Miljan Puzović, Aug 21 '12 at 00:43
Maybe is this what you want? http://stackoverflow.com/questions/5820304/hidden-scrollbars-in-firefox-allows-scrolling-but-just-no-scrollbar — Miljan Puzović, Aug 21 '12 at 00:47

score 1 · Answer 1 · answered Aug 21 '12 at 03:08

1

Do you mean to only have vertically scrolling content, whilst avoiding the horizontally scrollbars?

    #pageleft {overflow-x:hidden;overflow-y: auto;}

answered Aug 21 '12 at 03:08

Mark Cipolla

11
1

score 1 · Accepted Answer · edited May 23 '17 at 12:04

You can wrap it inside a second div, which is narrower by the scrollbar size and set that div's overflow to hidden.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<div id="wrapper">
<div id="scrollWrap">            
     <div id="pageleft">
          <div id="leftheader"></div>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>

     </div>
    </div>
</div>


</body>
</html>

CSS

#wrapper { width:980px;margin:0px auto; }
#scrollWrap { width:220px; height:500px; overflow:hidden; }
#pageleft { float:left;margin:10px 10px;width:228px;height:500px;border:1px solid #313131;overflow:scroll; }

#pageleft > #leftheader { width:228px;height:48px;background-image:url(http://i48.tinypic.com/2ecnjx2.png);border-bottom:1px solid #313131;display:block;position:absolute; }

#pageleft a { width:220px;height:66px;display:block;border-bottom:1px solid #313131;transition: all 400ms linear; }

#pageleft a:hover { background-color:#5ca0d1; }

http://jsfiddle.net/Sgq4j/3/

Referred to this solution: Remove HTML scrollbars but allow mousewheel scrolling

Try your demo in Chrome/Safari: highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use a textarea instead of the inner div and then fill it with some text. Then use the keyboard keys `Page Up` and `Page Down`. — Mori, Dec 06 '12 at 16:25
And this doesn't seem to be overflow-x dependent... Do you have any solution to disable this behavior? — user1612686, Dec 08 '12 at 09:48
I'm afraid not. I'm looking for a solution to a similar problem: [Scroll without a scrollbar](http://stackoverflow.com/questions/13752641/scroll-without-a-scrollbar). But to tell you the truth, the offered workaround is too complicated for me. — Mori, Dec 08 '12 at 15:49

score 1 · Answer 3 · answered Aug 21 '12 at 14:14

For webkit browsers, you can do:

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

Which will completely hide the scroll bar in Chrome/Safari/Anything else based on webkit.

I realize of course this isn't a portable answer but it'll give you an effect to try and match.

The other thing to do of course is to trap the mouse events for the scroll wheel and move the div yourself with javascript.

score 0 · Answer 4 · edited Jun 15 '17 at 17:50

0

::-webkit-scrollbar{ 

    display: none;
}

::-moz-scrollbar{ 

    display: none;
}

::scrollbar{ 

    display: none;
}

here webkit, moz and normal

edited Jun 15 '17 at 17:50

Blasanka

21,001
12
102
104

answered Jun 15 '17 at 16:23

Suntium

1
1

1

That will hide all scrollbars on the page. If you only want to hide scrollbars for one `#pageleft`, then use `#pageleft::-webkit-scrollbar`, `#pageleft::-moz-scrollbar`, and `#pageleft::scrollbar`. – wecsam Jun 15 '17 at 16:58
There is a code snippet in this answer that you can use to test whether your browser supports this: https://stackoverflow.com/a/13184693/1149181 – wecsam Jun 15 '17 at 17:01

remove scroll-bar yet still have controllable content

4 Answers4