忽略了取消touchmove事件，因为cancelable=false，比如正在滚动并且不能被中断。

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;

实际结果：当我在移动设备和平板电脑上滚动导航选项卡时，它没有滚动。

期望结果：当我滚动导航选项卡时，它应该可以滚动。

- sivasakthi

Answer 1

在 Ant Design 表格中，使用 'getContainer' API 来解决此问题。请参考此链接。

- Asif