0

I have a landing page where, after some actions, content is appended to the page, so that it goes above the fold, making the page scrollable. On Mac OS, no problem, it runs smoothly because the scrollbar is "transparent" and not in the way, but in Windows, and Linux, the scrollbar takes up space, like 20px, resizing the width of the page.
Is there a way to prevent that? To replicate the Mac OS style, and have the scrollbar come in front of the page instead of pushing in?

Cystack
  • 3,301
  • 5
  • 35
  • 33
  • try this : http://enscrollplugin.com/ for me it works very well you also can style the scrollbar – Timo Jungblut Nov 08 '13 at 13:35
  • adding an entire jQ plugin (+ jQ) to fix just that seems a bit overkill. I might dive into their code though to see how they do it. – Cystack Nov 08 '13 at 13:37

1 Answers1

1

Try this. This is @CalvinFroedge'S answer in this SO Question

      div { overflow:hidden;height:whatever px; } 
      div:hover { overflow-y:scroll; }

EDIT: To fix the resizing problem, making the width permanent seems to achieve the effect. So , change the div styling to 

      div { overflow:hidden;height:whatever px; width:watever px;}
Community
  • 1
  • 1
Anudeep Bulla
  • 8,318
  • 4
  • 22
  • 29
  • looks close enough but the real problem I have is the flicker effect when the scrollbar appears. The page goes from 1400px width (for ex.) to 1380px, so divs move, etc. which is noticeable and not controlled. This hover trick will only make this effect happen more often, no? Related not: I am on OSX at work so can't test the Windows behaviour. What would you suggest to emulate Windows? – Cystack Nov 08 '13 at 13:58
  • I'll test it as soon as I'm home, I have no access to a Windows machine at the moment :/ – Cystack Nov 08 '13 at 15:44
  • ok this is not working, I cannot specify an absolute number of pixels, it's the body of the page so I have to force width 100%, no way around that – Cystack Nov 11 '13 at 17:52