0

I'm having a very difficult time accomplishing what I want to do, and I'm starting to wonder if it's possible at all. Essentially, I have three divs that each vary in width depending on which one you're hovering over (simple transitions). The height of these divs is always equal to 100% height of the browser window, calculated with jQuery.

I use overflow-y: scroll to accomplish multiple sections of scrollable content. However, it looks clunkly to include three scrollbars, so I'm trying to get rid of them. On chrome, it's easy, I just use ::-webkit-scrollbar { display: none; }, but for other browsers it isn't quite as simple. Other questions have answered saying I need to be wrapping my content in a div that has overflow: hidden but I can't quite get that to work without all these transitions completely failing.

Here's a demo of what I'm talking about. Thanks in advance!

Chris
  • 240
  • 1
  • 4
  • 14
  • I think it looks quite nice with the three scrollbars, and removing them would only hurt usability. – MightyPork Jan 30 '14 at 13:44
  • scrollbars look fine to me, no need to spend time on this unless you got nothing more important to do. – Huangism Jan 30 '14 at 13:45
  • just give `overflow-y:scroll;` only on hover and a working fiddle http://jsfiddle.net/wizam/9T7ex/2/ – Green Wizard Jan 30 '14 at 14:02
  • As I mentioned below, this doesn't entirely get rid of the scrollbars, and it resets each div back to the top of its content when you stop hovering, which isn't quite the effect i'm looking for – Chris Jan 30 '14 at 14:09

2 Answers2

1

overflow-y: hidden will hide the scrollbars, if you set this to scroll on :hover only you will still be able to scroll each panel when the user hovers over it:

.panel {
    overflow-y: hidden;
}
.panel:hover {
    overflow-y: scroll;
}

The previous examples were missing the default hidden, that will stop the panels scrolling back to the top.

MarkLunney
  • 425
  • 1
  • 4
  • 10
  • This is definitely better.. So you don't think there's a way to remove them entirely? – Chris Jan 30 '14 at 14:22
  • How would the user scroll the box without scrollbars though? You could try a hack to hide the scrollbar, as someone previously mentioned, but this wouldn't be too clear to the user. Alternatively you could try a more jQuery plugin such as http://naeka.github.io/jquery-scrollbar/ for a more subtle scrollbar. – MarkLunney Jan 30 '14 at 14:27
0

You can show the scrollbar on hover

#container .display-panel:hover {
     overflow-y: scroll;   
}

remove the overflow-y from display-panel http://jsfiddle.net/9T7ex/1/

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • Unfortunately this resets the div content back to the top when you stop hovering over each div but I do like how that looks a little better. – Chris Jan 30 '14 at 13:53
  • can the containers have a set height? – Huangism Jan 30 '14 at 13:57
  • They do, don't they? Their height is always set to the window's height. – Chris Jan 30 '14 at 13:58
  • you can take a look at http://stackoverflow.com/questions/13317364/remove-scrollbar-but-not-scrolling-functionality but the css solution requires you to have a set width. The idea is to hide the scrollbar by reducing the width of the containing div by the scrollbar width – Huangism Jan 30 '14 at 14:12