CODEWITHSUNDEEP
javascriptreactjsantd
sivasakthi
sivasakthi

Reputation: 101

Ignored attempt to cancel touchmove event with cancelable=false,for example because scrolling is in progress and cannot be interrupted

while i'm using antd drawer. inside of that i'm using 'ui li ul ' tag.for that 'ul' scrollbar bar only working destop its not working for mobile and tablet even 

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;

actual result :when i scroll the nav tab it's not scrolling in mobile and tablet senorio.

expected result :when i scroll the nav tsb it should scroll.

Upvotes: 6

Views: 1980

Answers (1)

Asif
Asif

Reputation: 181

IN ant design table use 'getContainer' api to fix this issue Refer this link

Upvotes: 2

Related Questions