解决滚动条突然出现导致的页面错位问题

  有时候在一个宽高固定的容器中,需要加载“更多内容”,如果设置了overflow:auto,加载更多内容时,子元素的大小超过父容器,就会出现滚动条。而滚动条的突然出现,会让子元素统统“向左抖了一下”。效果如下:

  

  先来复习一下overflow的几个概念:

      overflow:visible    //默认属性,内容超出显示

   overflow:auto   //内容不超出时无滚动条,内容超出时才显示滚动条

   overflow:hidden    //内容超出隐藏

   overflow:scroll   //不管内容超不超出,滚动条常驻

  在这里,我的内容定位方式为:margin: 0 auto,这是因为滚动条出现后挤占了一部分位置,此时内容是在除了滚动条的绿色区域居中的,但相对于红色边框的父容器中,是稍稍偏左的。如下:

  

  特别注意一个问题:假如内容的宽度是用百分比来写的,那么计算时是不包括父容器的滚动条的。举个栗子,父容器在这里宽度为400px,内容宽度假如为80%,在没有滚动条时,内容宽度是320px。有滚动条时,内容则变成了(400px - 滚动条宽度)* 80%,也就是说,内容宽度此时要稍稍小于320px。

 

  解决方案一:滚动条常驻(不完美但也还行)

  滚动条常驻,或者滚动条消失,都是为了避免“滚动条从无到有”这个突发过程。当然,一般是不会让滚动条消失的,因为很容易会让用户以为没有“更多内容”或者“内容到此为止了”,这个现象是不太合理的。让滚动条常驻呢?不完美,但也可以接受。

  设置父容器overflow-y:scroll,效果如下:

  

  解决方案二:写死容器及子元素的宽高定位(特别注意小屏设备)

  既然用百分比来写宽高,用auto来定位都会受到滚动条的影响,那么为了不受其影响,把所有东西都写死不就行了,举个栗子,现在容器400px,内容320px,那么易得左边距为(400px - 320px)/2。

  

  内容部分的css代码如下:

  

  最终效果如下:

  

  可以看到已经是达到要求了,内容本身没有左移。但是注意这里的父容器是写定宽高的,在大屏电脑或者小屏笔记本宽度都是400px,如果父容器宽高又要随着屏幕不同而动态改变,那这个margin-left就没法定位到容器正中间了,除非先写定宽高再做缩放。

posted @ 2019-04-18 16:44  陌上兮月  阅读(4950)  评论(0编辑  收藏  举报