中间div高度根据屏幕高度自适应，适配移动端webapp，webview模式下，uniapp

最新推荐文章于 2024-05-16 23:47:56 发布

萨摩敲代码

最新推荐文章于 2024-05-16 23:47:56 发布

阅读量874

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/muzidanwu/article/details/112688694

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在开发Webapp时遇到Webview内overflow:scroll导致滚动不顺滑甚至无法滚动的问题，尝试了添加-webkit-overflow-scrolling:touch并未见效。最终通过调整为flex布局，使用uniapp的标签以及设置子元素与父元素等高来解决。对于非uniapp环境，推荐使用iscroll或mescroll库。

摘要由CSDN通过智能技术生成

最近做一个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>
.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%;
}
/*自适应部分结束 父元素与子元素等高*/