❓ [Scroll] 电脑上可以滚动，手机上不能滚动？

[dolymood]

可以先了解下滚动原理， https://didi.github.io/cube-ui/#/zh-CN/docs/scroll#cube-%E6%BB%9A%E5%8A%A8%E5%8E%9F%E7%90%86-anchor

核心是因为 Scroll 组件依赖所在容器元素有确定的高度，因为我们使用了 height: 100%。

但是可能会遇到一个问题：为什么我在电脑的模拟器上是可以滚动的，在某些手机上就不能滚动？

这是因为浏览器实现的不统一，如果说 Scroll 组件的容器元素应用了诸如 flex: 1 这样的样式，正常情况下，子元素 height: 100% 是可以和容器元素一样高的；但是，某些浏览器或者 WebView 并不能识别，所以这就依赖必须有确定的高度。解决办法就是可以在额外的增加一层，类似于这样：

<template>
<div class="flex">
  <div class="container">
    <div class="wrapper">
        <cube-scroll ... />
    </div>
  </div>
</div>
</template>
<style>
.flex {
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1;
  position: relative;
}
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>