Scroll not works on mobile PIXI JS

[kwernet]

Hello :)

I tried to make a canva which can scroll on mobile and desktop. I have succeeded to scroll on desktop and even with touchpad, but i can't to find a way to scroll on my mobile.

I have already manage the scroll with mouse wheel but i haven't succeeded with touchscreen. Do you have an idea to do work this below:

Thank you for your response :)

this.container = new PIXI.Container();
  this.app.stage.addChild(this.container);
  this.images = [t1, t2, t3, t4];
  this.WHOLEWIDTH = this.images.length*(this.width + this.margin)

  loadImages(this.images, (images)=>{
      this.loadImages = images;
      this.add()
      this.render()
      this.scrollEvent();
  })
}

scrollEvent() {
  document.addEventListener(
    'mousewheel',
    (e) => {
      this.scrollTarget = e.wheelDelta / 3;
    },
    { passive: true },
  );
}

add() {
  let parent = {
    w: this.width,
    h: this.height,
  };
  this.thumbs = [];
  this.loadImages.forEach((img, i) => {
    var nameEnum = {
      0: { name: 'Ecocampus3', value: '/Ecocampus3' },
      1: { name: 'Hoppin World', value: '/HoppinWorld' },
      2: { name: 'Distrame', value: '/Distrame' },
      3: { name: 'Club les Piranhas du Nord', value: '/CAPN' },
    };
    let texture = PIXI.Texture.from(img.img);
    texture.title = nameEnum[i];
    const sprite = new PIXI.Sprite(texture);
    let container = new PIXI.Container();
    let spriteContainer = new PIXI.Container();

    let mask = new PIXI.Sprite(PIXI.Texture.WHITE);
    mask.width = this.width;
    mask.height = this.height;

    sprite.mask = mask;

    sprite.anchor.set(0.5);
    sprite.position.set(sprite.texture.orig.width / 2, sprite.texture.orig.height / 2);

    let image = {
      w: sprite.texture.orig.width,
      h: sprite.texture.orig.height,
    };

    let cover = fit(image, parent);

    spriteContainer.position.set(cover.left, cover.top);
    spriteContainer.scale.set(cover.scale, cover.scale);

    container.x = (this.margin + this.width) * i;
    container.y = this.height / 10;

    spriteContainer.addChild(sprite);
    container.interactive = true;
    container.on('mouseover', this.mouseOn, { passive: true });
    container.on('mouseout', this.mouseOut, { passive: true });
    container.on('click', this.redirect, { passive: true });
    container.on('touchstart', this.redirect, { passive: true });
    container.on('touchmove', this.redirect, { passive: true });

    container.addChild(spriteContainer);
    container.addChild(mask);
    this.container.addChild(container);
    this.thumbs.push(container);
  });
}

redirect(e) {
  let e1 = e.currentTarget.children[0].children[0];
  let e2 = e1.texture.title.value;
  window.location.replace(e2);
}

mouseOut(e) {
  let e1 = e.currentTarget.children[0].children[0];

  gsap.to(e1.scale, {
    duration: 1,
    x: 1,
    y: 1,
  });
  e1.children[0].text = '';
}

mouseOn(e) {
  let e1 = e.target.children[0].children[0];

  const skewStyle = new PIXI.TextStyle({
    fontFamily: 'Raleway',
    fontSize: '60px',
    dropShadowColor: '#fff',
    fill: '#fff',
    fontWeight: 'bold',
  });
  let e2 = e1.texture.title.name;
  const basicText1 = new PIXI.Text(e2, skewStyle);
  basicText1.x = -400;
  basicText1.y = 100;
  gsap.to(e1.scale, {
    duration: 1,
    x: 1.1,
    y: 1.1,
  });
  if (e1.children[0]) {
    e1.children[0].text = e2;
  } else {
    e1.addChild(basicText1);
  }
}

[ivan.popelyshev]

mousewheel works only on PC's. To scroll on mobiles you have to add pointerevents for multiple fingers, maybe @themoonrat knows how to do that

[kwernet]

Hello @ivan.popelyshev thank you for this point, @themoonrat do you know a way to do that ?