two absolute divs; one make scrollbar appear; one does not

Question

Here is my site:
http://bible.preahkumpii.com
Once the page loads (it's a web app), you will see two absolute positioned divs in the #main div. The #selector div is hidden with left:-100%, and the scrollbar does not appear. The other div, #searcher, is a sibling, and it is positioned similarly with right:-100%. But, as you can see, the x scrollbar is activated because of the #searcher div being there. I do not want that. I want it to work exactly the same as the #selector div, in which it is hidden entirely (scrollbar and all) until the user activates it. Both of these are animated into view using jQuery on click.

#selector {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: white;
    text-align: center;
    overflow: auto;
    z-index: 50;
}
#searcher {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    white-space: nowrap;
    font-family: 'Battambang';
    font-size: 120%;
    right: -100%;
    text-align: center;
    z-index: 10;
    background: white;
}

score 1 · Accepted Answer · answered Mar 17 '14 at 04:20

1

You would just add overflow-x:hidden to the body element:

body {
    overflow-x: hidden;
}

You should probably implement a back button though.

answered Mar 17 '14 at 04:20

Josh Crozier

233,099
56
391
304

Back button, NYI. Let me try it out. – preahkumpii Mar 17 '14 at 04:21
1

That was it. I should have known better. Oversight. Thanks for the help. – preahkumpii Mar 17 '14 at 04:23
Though, I am curious why the `#selector` div didn't cause the scrollbar to appear. – preahkumpii Mar 17 '14 at 04:26
1

@preahkumpii That's because it's on the left side. Here is a [related question](http://stackoverflow.com/questions/2284562/absolutely-positioned-div-on-right-causing-scrollbar-when-the-left-doesnt). – Josh Crozier Mar 17 '14 at 04:28

two absolute divs; one make scrollbar appear; one does not

1 Answers1