【兼容性】ios上设置overflow: scroll不滚动bug

背景

目前遇到这么一个问题：我有一个可以向下展开的下来菜单，菜单初始高度大于300px左右，没有超过手机屏幕高度，当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动，就是说内容的高度是动态的。

描述

此前我通过js动态获取屏幕高度，并设置为父元素的max-height。然后设置父元素overflow-y: scroll;

起初，我大概的代码布局如下：

 <div className='。' style={{ maxHeight: this.state.viewPortHeihgt + "px" }}><Lists>...</Lists></div>

其中Lists中的内容的高度是动态的。
css如下：

 .small-nav{overflow-y: scroll;overflow-x: hidden;}

此方法在andriod和pc上运行正常，但是在ios上就出现卡出不能滑动的现象。

分析

我们知道，页面的渲染流程分为以下几个步骤：

构建DOM tree
构建CSS Rule tree
根据DOM tree和CSS tree来构建render tree
根据render tree计算页面的layout
render页面

safari浏览器在构建render tree的时候，会预先找到相应的overflow: scroll元素，在计算页面layout的时候，会计算父元素的高度与子元素的高度，若子元素高于父元素，则在render页面时为其建立一个原生的scrollView。当子元素的高度小于父元素的高度时，safari不会给父元素一个原生的scrollView。

这里我Lists中的内容初始是小于父元素.small-nav的高度的，所以在ios的解释中不会给父元素添加一个scrollView。

解决

针对这种情况，我们可以设置让浏览器一开始就给父元素增加scrollView，当我们的内容撑开，高过父元素的时候，就可以进行滑动。

代码如下：

 <div className='small-nav-outer' style={{ height: this.state.viewPortHeihgt + "px" }}><div className='small-nav-inner'><Lists>...</Lists></div></div>

.small-nav-outer{-webkit-overflow-scrolling: touch;overflow-y: scroll;overflow-x: hidden;}.small-nav-inner{min-height: calc(100% + 1px);}

代码中可以看出，我在父元素的内部添加一个一个包裹的div，.small-nav-inner，让他的高度高于父元素1px，然后给父元素添加 -webkit-overflow-scrolling: touch;属性，这样可以令一开始的时候就添加一个scrollView。

如此，ios上的兼容性问题得以解决。

以上内容参考大神博文：
https://segmentfault.com/a/1190000016408566

【兼容性】ios上设置overflow: scroll不滚动bug相关推荐

在移动端设置overflow:hidden禁止滚动的解决方法
在移动端设置overflow:hidden禁止滚动的解决方法参考文章: (1)在移动端设置overflow:hidden禁止滚动的解决方法 (2)https://www.cnblogs.com/ko ...
ios滚动条影响父页面 vue_父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案...
在使用 vu围幸业很例站闪以近着好务多如宽动为近着好edraggable 做拖拽效果时,因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我 ...
修改 placeholder 样式，placeholder 换行以及iOS 上设置placeholder被遮挡问题解决
一.修改placeholder样式通过选择器就可以简单的修改该placeholder的样式 input::placeholder{font-size:14px;color: #666666; } 二 ...
html scroll无效,css div设置overflow-x: scroll 横向滚动无效
我给最外层div设置了overflow-x: scroll想要里面的span超出时横向滚动发现效果依然是上下滚动请问这个种情况该如何布局 html 满999减40 满999减40 满999减40 ...
css 设置overflow:scroll 滚动条的样式
/* 定义滚动条样式 */ ::-webkit-scrollbar {width: 6px;height: 6px;background-color: rgba(240, 240, 240, 1); ...
iOS 移动端overflow:auto 滚动不平滑及bug处理
在苹果手机上使用overflow:auto 默认滚动不平滑. 解决方案是使用-webkit-overflow-scrolling:touch bug: 会导致使用固定定位的元素,随着页面一起滚动. f ...
解决H5在移动端overflow:scroll滚动条默认不显示和滚动后消失的问题
今天在工作中,遇到一个关于overflow在移动端视图调试滚动的问题,我在使用了overflow:scroll进行滚动时,滚动后滚动条自动消失了,需求是需要保留让它一直都在,下面的代码意思是重新设置滚 ...
overflow:scroll滚动条样式修改
第一,在需要加滚动条的元素上加上overflow: scroll,并设置高度! 如: <div><p class="AddStyle">2131313212 ...
qq群 voiceover_如何在iOS上使用VoiceOver为所有人构建应用程序
qq群 voiceover by Jayven N 由Jayven N 如何在iOS上使用VoiceOver为所有人构建应用程序 (How to build apps for everyone usi ...

【兼容性】ios上设置overflow: scroll不滚动bug

背景

描述

分析

解决

【兼容性】ios上设置overflow: scroll不滚动bug相关推荐

最新文章

热门文章