browser vertical scrollbar fail

StackOverflow https://stackoverflow.com/questions/22161225

  •  19-10-2022
  •  | 
  •  

Question

My vertical scrollbar on the rightmost side of the browser window appears correctly and scrolls correctly if:

  • I make the browser window tall enough to show my site's entire landing page
  • then collapse the height of the browser window so only the top 1/2 of the page is visible
  • in which case the vertical scrollbar automatically appears and it correctly allows scrolling downward to see the rest of the page

Here's the CSS style that makes the vertical scrollbar visible:

 <!DOCTYPE html>
 <html style="min-width: 100%">
 body
 {
   white-space: nowrap;
   height: 105%; 
   overflow-y: scroll; /* scrollbar always visible, stops page content shifting left */
 }                     /* due to the sudden appearance of the scrollbar on the right */

However, if I do the following, the vertical scrollbar on the right edge of the browser fails to work if:

  • before loading the landing page, I reduce the height of the browser window so only the top 1/2 of my web page is visible when I load it
  • then hit the 'reload' button in the browser
  • in which case, the page reloads but the vertical scrollbar somehow is not 'noticing' the lower 1/2 of the web page -- the vertical scrollbar doesn't display enough 'scrollable capacity', ie. 'scroll offset', to permit scrolling down far enough.

The outermost divs on the page have these styles:

 .DivForCenteringThePage
 {
    min-width: 100%;
    min-height: 100%;
    white-space: nowrap;
    margin: 0 auto;      
 }


<div id="wholePageDiv" class="DivForCenteringThePage"> 
  <div id="outerDiv" style="margin: 0; margin-top: 10px; min-width: 100%; 
                     display: inline-block; overflow: hidden;">
    <div id="leftSide" style="vertical-align: top; display: inline-block;
              min-height: 99%; overflow-y: auto; overflow-x: hidden;">

             /*  A BUNCH OF TALL COLUMNS CONTAINING STACKED DIVS IS THE PAGE */

    </div> <!-- leftSide div -->
  </div> <!-- outerDiv -->
</div> <!-- wholePageDiv -->

I'm stumped. On the one hand, the browser's vertical scroll bar works fine if I start with the browser window tall enough to show the whole page's height, and then collapse the browser to show only the top 1/2 of the page -- the vertical scrollbar appears correctly and I can scroll down to see the bottom 1/2 of the page.

But if I start by loading the page when the browser window is only tall enough to show the top 1/2 of the page -- the vertical scollbar needs to be there to allow scrolling down to see the bottom 1/2 of the page, but while it appears, it has no 'range,' no way to scroll the page down.

Do I have a conflict in my styles here?

Was it helpful?

Solution

I backed out a lot of code changes by reverting to an older version of the source code and the problem was gone. Sometimes it's important to keep an eye on the big picture and cut your losses, a lot of changes to the code caused this scrolling symptom and it saved time to just return to a version of the code before the problem existed.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top