欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-08 07:55:47
有时候在一个宽高固定的容器中,需要加载“更多内容”,如果设置了overflow:auto,加载更多内容时,子元素的大小超过父容器,就会出现滚动条。而滚动条的突然出现,会让子元素统统“向左抖了一下”。效果如下: 先来复习一下overflow的几个概念: overflow:visible //默认属性, ......

  有时候在一个宽高固定的容器中,需要加载“更多内容”,如果设置了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就没法定位到容器正中间了,除非先写定宽高再做缩放。