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

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

原文链接:https://www.cnblogs.com/zhangnan35/p/10730617.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有