Scrollbar disappears when using "display:none;"

hi all,

 

here´s case:

 

when loading hompage of site working on, looks this:

 

in upper part, can see <div id="wrapper1">content1< /div>, shows image , text, surrounded grey border

in lower part,  can see <div id="wrapper2">content2< /div>, contains text within jquery widget customizable scrollbar , images on right side, surrounded grey border.

 

using script (jquery) , clicking on wrapper1, wrapper 1 slides , wrapper2 slides down. looks pretty cool when in action. , result can seen in picture below.

 

 

as can see, wrapper1 "disappeared" , wrapper2 can seen wrapper1 before click.

 

in order not show wrapper1 , wrapper 2 @ same time, used "display:none" in css-rule #wrapper2

 

so homepage being displayed should. wrapper1 shown, wrapper 2 not shown.

 

when click on wrapper1, slides , wrapper2 slides down. point, perfect.

 

the problem: scrollbar disappeared, can see in next image.

 

 

the problem seems have "display:none" rule #wrapper2.

 

when executing script clicking on wrapper1, div gets inline "style=display:none", whereas wrapper2 gets inline "style=display:block".

the initial css-rule "display:none" #wrapper2 seems overwritten. but: scrollbar disappears.

 

i tried following:

i used same "scenario" script does: adhere wrapper1-div inline "style=display:none" , wrapper2-div inline "style=display:block". in case scrollbar appear!

 

can me problem solved?

 

thank in advance...

 

 

hermann

More discussions in Business Catalyst

adobe