摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。
有时候在一个宽高固定的容器中，需要加载“更多内容”，如果设置了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.ucloud.cn/yun/870.html
摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。 有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下： 先来复习一下ov...
摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。 有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下： 先来复习一下overflow的...
摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。 有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下： 先来复习一下overflow的...
摘要：项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，也研究了一下。表头放在中，表体放在中，给设置固定高度，加样式，这样在数据多的时候会出现滚动条，数据少的时候滚动条会消失。项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，bootstrap table也研究了一下。 下面是我们使用的方法。 表头放在div1中，表体放在div2中，给div2设置固定高度，加样式o...
阅读 2096·2021-11-16 11:45
阅读 1131·2021-10-22 09:53
阅读 3955·2021-09-07 10:26
阅读 1181·2021-09-06 15:00
阅读 2054·2019-08-28 18:09
阅读 2770·2019-08-26 14:06
阅读 3892·2019-08-26 13:48
阅读 1280·2019-08-26 12:11
