Why disable touch events on inline gallery?

I created an inline gallery instance following instructions in the FAQ and quickly discovered the limitation of vertical scrolling on touch-enabled devices. The page won’t scroll if the touch gesture originates over the inline gallery.

Reading the source, it looks like vertical scroll is prevented by a number of factors:

• CSS: touch-events: none on .pswp and .pswp__container;
• JS: e.preventDefault() in _onDragMove() handler;
• JS: e.preventDefault() in _onDragStart() handler as a result of _preventDefaultEventBehaviour() call (which can be overridden with preventObj.prevent = false in the preventDragEvent event handler, as described in the API docs).

I created a fork of PhotoSwipe that fixes the scroll issue for my use case and allows touch events to pass when _options.modal == false.

Before attempting to provide a pull request, can you briefly explain if this has been considered before? My proposed solution is when _options.modal == false:

• CSS: enable touch events in for .pswp and .pswp__container;
• JS: do not preventDefault() in _onDragStart() and _onDragMove()
• JS: check _direction in _onDragMove() and if the value is "h" (horizontal), then preventDefault() to avoid vertical scrolling while swiping.

I saw a similar solution was proposed in #1050.

Can you explain why the current behaviour should be enforced even when the gallery is inline?

[rafaelderolez]

@oslego Thanks a lot for the preventDragEvent handler. It solved my problem with touch devices as well.

[oslego]

@newsomc See the “non-modal-scroll” branch in my fork: https://github.com/oslego/PhotoSwipe/tree/non-modal-scroll

The diff should explain what I changed in src/css/main.scss, src/js/core.js and src/js/gestures.js. The other changes are just the result of the build.

This is the setup for my gallery, the “preventDragEvent” handler is necessary:

var options = {
  history: false,
  maxSpreadZoom: 1,
  index: 0,
  focus: false,
  escKey: false,
  modal: false,
  pinchToClose: false,
  closeOnScroll: false,
  closeOnVerticalDrag: false
}

// items is the Array of photo configs
var gallery = new PhotoSwipe($('.pswp'), false, items, options);
gallery.listen('preventDragEvent', function(e, isDown, preventObj) {
  preventObj.prevent = false;
});
gallery.init();

This solution isn’t bullet-proof, as @dimsemenov mentioned, but it worked for my use case. Maybe it helps you too. Swiping with the mouse on a laptop may cause positioning issues, but it worked well on a touch-enabled device.