2

I've researched and I'm really getting nowhere with this issue. I'm using a CSS style and HTML template for a website where they have a nav-bar on the left hand side. I want to add quite a lot of links to this navigation bar and so I have added an overflow: scroll; component.

Now unfortunately I have quite an ugly scrollbar in the middle of the website. I have tried changing it to "hidden" but this prevents the scrolling all together. I have tried to change the colouring of the scrollbar to match the website but I'm not really getting anywhere with that. The code is below:

aside#sidebar {
    width:250px;
    position: fixed;
    height:100%;
    overflow: scroll;
}

If I take out the "position:fixed;" the bar takes up the rest of the webpage and doesn't work properly.

Does anyone have any advice? Is there anyway to get rid of this scroll bar or colour it nicely?

Thanks for any help! Christina

Christina
  • 323
  • 1
  • 3
  • 8

1 Answers1

0

You can wrap your scrollable element inside an overflow:hidden parent which width is 17px (or more) - less than the inner scrollable Element width (in order to hide the scrollbars).

#sidebar{
  position:relative;
  overflow:hidden;
  height:100px;
  width:150px; /* note this */
}
#sidebar ul{
  width:170px; /* and this */
  overflow-y: scroll; /* add scrollbar */
  position:absolute;
  height: inherit; /* parent height or 100% */
  background: #ddd;
}
  <div id="sidebar">
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </div>

To color them nicely you can use a JS plugin or do it natively for Webkit Brosers

Regarding better UX (user experience) a scrollbar should be visible or at least some design element that will assume the presence of a long vertical scrollable list

Here's a similar topic I've covered that uses JS and jQuery (+jQuery UI):
How to make custom scrollbar jQuery plugin

Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Hiya, My CSS is not brilliant I'm afraid, would you be able to show me how I would wrap this in a parent? – Christina Jan 04 '15 at 17:48
  • I'm not sure all browsers scrollbar width is 17px. EDIT: a quick check tell me it is on all major browser desktop version, but what about mobile devices? – A. Wolff Jan 04 '15 at 17:51
  • @A.Wolff if I recall well from one of my latest projects (mobile) if I have an overflow hidden element containing a scrollable element will let me scroll that element. the scrollbar is not visible. Also for mobile, one might want to change the appearance of the sidebar menu – Roko C. Buljan Jan 04 '15 at 17:55
  • @RokoC.Buljan Thanks so much, I'll test it out on the website and show you the results ASAP! – Christina Jan 04 '15 at 18:06
  • @RokoC.Buljan Thanks so much that's worked brilliantly, looks very snazzy now! Thanks for the example as well it's worked great. – Christina Jan 04 '15 at 18:25