Question

浏览器窗口最右侧的垂直滚动条正确显示，并在以下情况下正确滚动：

我使浏览器窗口足够高，以显示我网站的整个目标网页
然后折叠浏览器窗口的高度，以便只显示页面的上半部分
在这种情况下，垂直滚动条会自动出现，并且正确地允许向下滚动以查看页面的其余部分

这是使垂直滚动条可见的CSS样式：

 <!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 */

但是，如果我执行以下操作，则在以下情况下，浏览器右边缘的垂直滚动条无效：

在加载着陆页之前，我减少了浏览器窗口的高度，因此当我加载时只能看到我网页的前1/2页
然后点击浏览器中的“重新加载”按钮
在这种情况下，页面重新加载，但垂直滚动条以某种方式“注意到”网页的下半部分 - 垂直滚动条没有显示足够的“可滚动容量”，即。 '滚动偏移'，允许向下滚动足够远。

页面上最外面的div具有以下样式：

 .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 -->

我很难过。一方面，如果我从足够高的浏览器窗口开始显示整个页面的高度，浏览器的垂直滚动条工作正常，然后折叠浏览器以仅显示页面的前1/2 - 显示垂直滚动条正确，我可以向下滚动以查看页面的底部1/2。

但如果我启动，那么当浏览器窗口高度足以显示页面的前1/2时，加载页面 - 垂直scollbar需要在那里允许向下滚动到看到页面的底部1/2，但是当它出现时，它没有“范围”，无法向下滚动页面。

我的风格在这里有冲突吗？

Answer 1

我通过恢复到旧版本的源代码来退出了很多代码更改，问题就消失了。有时重要的是要密切注意大局并减少损失，代码的大量更改会导致这种滚动症状，并且在问题出现之前只需返回代码版本就可以节省时间。

浏览器垂直滚动条失败

1 个答案: