中间div⾼度根据屏幕⾼度⾃适应，适配移动端webapp，webview模式
下，uniapp
最近做⼀个webapp的项⽬，真机调试时遇到了个overflow:scroll的坑，各种百度跳坑之后解决了，特此记录⼀下，以便查看。
pc端使⽤overflow:scroll可以实现超出视觉范围滚动，但是在webview模式下，这个属性会使页⾯滑动很卡，有的可能是数据过多，⽆法滚动，加上-webkit-overflow-scrolling: touch；也没有解决。
然后更改了flex布局，使⽤了uniapp中的标签。另外加上⼀个⼦元素与⽗元素等⾼的css，终于解决了。
其他端或者不⽤uniapp的朋友可参考iscroll或者mescroll
<view class="flex_row">
<view class=""></view>
<view class="yifen contan">
<scroll-view class="chaxun" :scroll-y="true">
</scroll-view>
</view>
<view class="">
</view>
</view>
html的flex布局.flex_row{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.yifen{
width: 20%;/* For old syntax, otherwise collapses. */
-webkit-flex: 1;/* Chrome */
-ms-flex: 1;/* IE 10 */
box-flex:1.0;
flex: 1;/* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1;/* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1;/* OLD - Firefox 19- */
}
/
*⾃适应部分开始⽗元素与⼦元素等⾼*/
/*这个很重要，真机中height:100%⽆法使scroll-view与⽗元素等⾼*/
.contan{
background-color: #fff;
width: 100%;
overflow: hidden;
position: relative;
}
.chaxun{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
/*⾃适应部分结束⽗元素与⼦元素等⾼*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。