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

617035918 发布于2019-04-23 10:22 / 1400人阅读

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。

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

服务器托管云服务器阿里云服务器出现问题怎么解决 html的滚动条 java滚动条的事件 cdn的出现问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/979.html

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

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：先来复习一下overflow的...

timger 2019-04-22 17:02 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：先来复习一下overflow的...

Faremax 2019-04-22 16:34 评论0 收藏0
解决滚动条突然出现导致的页面错位问题

摘要：而滚动条的突然出现，会让子元素统统向左抖了一下。解决方案一滚动条常驻不完美但也还行滚动条常驻，或者滚动条消失，都是为了避免滚动条从无到有这个突发过程。有时候在一个宽高固定的容器中，需要加载更多内容，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统向左抖了一下。效果如下：先来复习一下overflow的...

hedzr 2019-04-22 16:12 评论0 收藏0
表头固定，表的主体设置滚动条，同时解决错位问题

摘要：项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，也研究了一下。表头放在中，表体放在中，给设置固定高度，加样式，这样在数据多的时候会出现滚动条，数据少的时候滚动条会消失。项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，bootstrap table也研究了一下。下面是我们使用的方法。表头放在div1中，表体放在div2中，给div2设置固定高度，加样式o...

nanchen2251 2019-04-23 13:11 评论0 收藏0