[youzan/vant]iOS（任何版本）下Popup的preventScroll属性会禁止掉弹层内部的内容滚动

iOS（任何版本）下Popup的preventScroll属性会禁止掉弹层内部的内容滚动，而Android是没有这个问题的，PC端和Mac端用Chrome模拟也没问题。

布局大概是这样的：

<van-popup v-model="visible" position="bottom" :preventScroll="true">
    <van-tabs class="custom-tabwrap" @click="handleTabClick">
      <van-tab title="Tab1">
        <tl-audio-item></tl-audio-item>
      </van-tab>
      <van-tab title="Tab2">
        <tl-album-item></tl-album-item>
      </van-tab>
    </van-tabs>
</van-popup>

其中<tl-audio-item></tl-audio-item>组件内部是一个根据内容多少滚动的ul列表

erniu

增加一个条件：

就以官网示例中的“底部弹出”为基础，以这种半高的弹层场景看起来更直观

erniu

改了下官网的例子，在iOS机子上没有复现。

preventScroll 的作用是防止滚动事件冒泡到最顶层的 webview 触发最外层的容器滚动，不会影响弹出层内部设置的滚动。

你可以尝试下设置可滚动部分的 css, 比如 overflow-y: scroll

如果还是不行，可以给我们一个完整的 jsfiddle 代码段

Tinysymphony

https://jsfiddle.net/erniu/15hsc4xt/

简单做了个重现的代码片断，iOS(任意版本)上，Safari与微信内置浏览器都能重现。请注意是在真机上

Vue: 2.5.2 vant: 0.11.5 - 0.11.11

这个片断中还有另一个缺陷，tab的初始化active状态有点问题，应该是动态算宽度的时候取值不对

erniu

重新试了下可以复现你的问题。

popup mixin 里面的钩子元素有点问题，在下版本会修复。

修复后，解决起来就是上面回复的那样，给 popup 里面的需要滚动的列表 container 加 overflow-y: scroll; 并设置高度，如果要更顺滑的话再加上： -webkit-overflow-scrolling: touch; 因为 popup 的高度是用户自己定义的，超出的内容是滚动还是隐藏需要自己用 css 设置。

tab 初始化 active 下面的小条条显示的确有问题，因为这个样式目前是计算出来的（因为做了这个动效，然后不同的 tab 长度不同）在初始不可见的时候算出来是 0 …… 目前有个丑陋的办法是监听 popup 打开的事件，手动去算一波，或者干脆不要用这个动效（在容器长度改变的情况下，也无法重新计算）

Tinysymphony

这么晚还在努力，辛苦了！

erniu

[youzan/vant]iOS（任何版本）下Popup的preventScroll属性会禁止掉弹层内部的内容滚动

回答