忽略尝试使用 cancelable=false 取消 touchmove 事件，例如因为滚动正在进行且不能被中断

Question

当我使用 antd 抽屉时。在里面，我正在使用“ui li ul”标签。对于那个“ul”滚动条只能工作停止它甚至不适用于手机和平板电脑

componentWillUpdate() {
    window.addEventListener("touchmove", ontouchmove);
    function ontouchmove(e) {

      if (e.cancelable) {
        e.preventDefault();
        e.stopPropagation();
        return false;

      }
    }
}

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Drawer, Button } from "antd";

class App extends React.Component {
  state = { visible: false };

  componentWillUpdate() {
    window.addEventListener("touchmove", ontouchmove);
    function ontouchmove(e) {

      if (e.cancelable) {
        e.preventDefault();
        e.stopPropagation();
        return false;

      }
    }
  }

  showDrawer = (e) => {
    this.setState({
      visible: true
    });
  };

  onClose = (e) => {
    this.setState({
      visible: false
    });
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showDrawer}>
          Open
        </Button>
        <Drawer
          title="Basic Drawer"
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
        >
          <div>
            <nav
              className="tab-list"
              style={{
                whiteSpace: "nowrap",
                overflow: "auto"
              }}
            >
              <ul style={{ listStyle: "none", Padding: 0, margin: 0 }}>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                 <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
                <li style={{ display: "inline-block", float: "none" }}>
                  sivasakthi
                </li>
              </ul>
            </nav>
            <div></div>
          </div>
        </Drawer>
      </div>
    );
  }
}

export default App;

实际结果：当我滚动导航选项卡时，它不会在移动设备和平板电脑 senorio 中滚动。

预期结果：当我滚动导航 tsb 时，它应该滚动。

Answer 1

在 ant design table 中使用 'getContainer' api 来解决此问题 请参阅此链接