Ant-design-mobile: tabBar组件有bug

[jisao]

tabBar组件里面的子页面在上下滑动的时候会卡顿不流畅，手指划多少距离页面就走多少距离。
如果在页面标签上加上-webkit-overflow-scrolling : touch;这样看似解决了问题，但是又会出现新的问题，会出现在滑到顶部或者底部的时候，页面会突然滑不动，要手指点一下页面，然后再滑动才会有效果

[ant-design-bot]

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: https://github.com/ant-design/ant-design/issues/4897

[zhang740]

检查外层是否有fixed，请提供demo

[jisao]

www.ninilive.top 用手机打开此DEMO，就会发现问题

[zhang740]

android Chrome & wechat 未复现，请提供完整环境信息

[jisao]

我是用苹果手机测试的，ios系统环境下不行，你可以测试下

[jisao]

等待回复中！ 找到了大致原因，ios环境下如果外层容器设置了over-flow:hidden; 必须得给这个容器设置
-webkit-overflow-scrolling : touch；但是这样做依然会带来新麻烦，滑动到最顶部或者最底部的时候，有时会出现划不动的情况

[lusanshao]

是的,iPhone下会出现这样的问题,我也遇到了

[zhang740]

.am-tabs-pane-wrap {
  -webkit-overflow-scrolling: touch;
}

@jisao @lusanshao 试一试这么加样式？

[mogazheng]

同样遇到这个问题

[mogazheng]

外层有用fixed，问题和楼主的描述一模一样，容器设置-webkit-overflow-scrolling : touch；滑动到顶部或者底部之后，放开手，重新尝试滑动就动不了了。

[mogazheng]

@jisao 我尝试了多次，发现是下拉滑动到顶部之后，放开，这个时候上拉滑动是可以的。如果下拉滑动到顶部之后，放开，再下拉，之后就动不了了。

[dasoncheng]

*{
  -webkit-overflow-scrolling: touch;
}

fixed

[ovaldi]

Same issue +1

[ladjzero]

same issue +1 , version 2.1.8

[Thunf]

Same issue +1，
目前的解决办法：

把外层的overflow、-webkit-overflow-scrolling全部移除，使滚动发生在body里（而不是某个自定义的DOM里去模拟scrolling）

[doxiaodong]

import * as React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';

class Header extends React.Component<any> {
  static defaultProps = {
    className: '',
  };
  render() {
    const { style, renderCount, className } = this.props;
    return (
      <div className={'header ' + className} style={style}>
        <h2 style={{ margin: 0 }}>
          <span className="pull-left">
            {'<Sticky /> '}
            {renderCount ? <small>(invocation: #{renderCount})</small> : null}
          </span>
        </h2>
      </div>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <div
        style={{
          height: '100%',
          width: '100',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            height: 3000,
            overflow: 'scroll',
            '-webkit-overflow-scrolling': 'touch',
          }}
        >
          <h2 className="text-center">wo</h2>
          <h2 className="text-center">wo</h2>
          <StickyContainer className="container">
            <Sticky>
              {({ style }) => (
                <Header style={{ ...style, background: 'red' }} />
              )}
            </Sticky>

            <div>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
              <h2 className="text-center">wo</h2>
            </div>
          </StickyContainer>
        </div>
      </div>
    );
  }
}

这段代码可以复现这个问题，如果滚动的元素是 overflow: scroll 触发的，那么会触发此 bug

[doxiaodong]

建议 @Thunf 那样更改代码

[dxjdqc]

建议 @Thunf 那样更改代码
加 '-webkit-overflow-scrolling': 'touch' 后，页面时顺滑了，但是页面偶尔会卡住动不了。就像 @mogazheng 描述的问题一样

[dxjdqc]

@jisao 我尝试了多次，发现是下拉滑动到顶部之后，放开，这个时候上拉滑动是可以的。如果下拉滑动到顶部之后，放开，再下拉，之后就动不了了。
请问您最后是怎么解决的呢？我遇到了同样的问题

[dxjdqc]

Same issue +1，
目前的解决办法：

把外层的overflow、-webkit-overflow-scrolling全部移除，使滚动发生在body里（而不是某个自定义的DOM里去模拟scrolling）

这样解决后没有遇到页面偶尔会卡死的情况吗？

[dxjdqc]

等待回复中！ 找到了大致原因，ios环境下如果外层容器设置了over-flow:hidden; 必须得给这个容器设置
-webkit-overflow-scrolling : touch；但是这样做依然会带来新麻烦，滑动到最顶部或者最底部的时候，有时会出现划不动的情况

请问最后怎么解决的啊，我也碰到这个问题了

[doxiaodong]

不要用 overview: scroll|auto 来滚动，使用 body 的滚动

[dxjdqc]

不要用 overview: scroll|auto 来滚动，使用 body 的滚动
您好，我把tabBar组件中overview: scroll|auto；和overflow-y: auto;都注掉，然后在body上添加了height: 100%;overflow:auto；页面直接滑动不了。

[dxjdqc]

最后的解决方法：

.am-tabs-tab-bar-wrap {
  -ms-flex-negative: 0;
   flex-shrink: 0;
   position: fixed;
   width: 100%;
   bottom: 0px;
   left: 0px;
   right: 0px;
   z-index: 1;
}

并去掉.am-tabs-pane-wrap 中的 overflow-y: auto属性

[krm007]

请问最后怎么解决的啊？也遇到同样的问题了。目前只有安卓显示正常