Photoswipe: Inline Galleries & Vertical dragging (mobile) discussion

[silentbugs]

Per the FAQ, there is currently an issue with inline galleries, i.e. modal: false option. The reason given is that this feature "calls prevetDefault() on touch events". I'm opening this issue to discuss in more detail why this happens and what our options are.

In my opinion, given the following options PhotoSwipe shouldn't consume the vertical drag touch event, like it doesn't consume the mousewheel scroll event:

options = {
    ...
    modal: false,
    closeOnVerticalDrag: false,
    closeOnScroll: false,
}

Example codepen: here. If you want to check mobile behavior you can switch your browser to "responsive" mode.

So modal: false means that the gallery is displayed inline and that the rest of the page should scroll normally,closeOnVerticalDrag: false means that if we swipe up the image it shouldn't change PhotoSwipe's behavior, and closeOnScroll: false means that when we use the scroll wheel over a PhotoSwipe item it shouldn't alter its behavior. Correct me if I'm wrong, but the combination of those 3 settings means that PhotoSwipe should simply not do anything on vertical drags and/or scrolls.

By the way, @dimsemenov the inline gallery's example codepen uses old photoswipe js/css settings which are no longer hosted so you might wanna update it.

[silentbugs]

@dimsemenov apologies for bumping, I would appreciate a response or thought from you.

[silentbugs]

After lots of hours of reading PhotoSwipe's source as well as debugging, I've found a workaround for this issue.

As mentioned previously, working with the settings modal: false, closeOnVerticalDrag: false and closeOnScroll: false we expect PhotoSwipe to scroll vertically on mobile devices just like it does with the mousewheel. In the docs @dimsemenov mentions that you can listen to the preventDragEvent event and decide whether PhotoSwipe should call 'event.preventDefault()' on the current touch event. Always setting it to false should never consume any clicks from PhotoSwipe, and it doesn't - yet mobile scrolling still wouldn't work, as demonstrated on this codepen, even though as I understand with the current options and with never calling preventDefault my touches should go through.

After nearly disabling every single CSS rule on every single element, I found out that .pswp, .pswp__container and .pswp__zoom-wrap have the property touch-action: none which is similar to calling preventDefault on those elements and therefore the touches never propagated further in. So my final fix was to revert that rule in my CSS, as demonstrated on this functioning Codepen (make sure you either view it on mobile or have your browser in mobile mode).

I'm not sure if this is considered a bug or not, but if I understand things correctly when the options above, as well as possibly returning false on preventObj.prevent mobile touches should go through.

TL;DR Fix:
yourJavascript.js

var options = {
      modal: false,
      closeOnScroll: false,
      closeOnVerticalDrag: false,
}

var pswp = new PhotoSwipe(...);

pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
    preventObj.prevent = false;
});

your-style.css

.pswp, .pswp .pswp__container, .pswp .pswp__zoom-wrap {
  touch-action: auto !important;
}

[untitledlt]

Your fix breaks swiping on IE11. Here is a fix to your fix :)

pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
    preventObj.prevent = !('ontouchstart' in document.documentElement);
});

[alexvais]

@silentbugs so you can reach a vertical scroll when you can show for example an "image descripcion" or anything and swipe next a prev without any issue?

[7freaks-otte]

The suggestions above did not quite work for me, as I needed to open html text modal that should be scrollable and I found out that the scrolling was prevented by PhotoSwipe's "DesktopZoom" module in JavaScript.

I know that this issue is about inline galleries but I found it while searching for a way to stop PhotoSwipe preventing my scroll events. Maybe my workaround overriding setupDesktopZoom can help in the case of inline galleries as well or it may help someone else who finds this issue while searching for scrollable modals.

Besides providing a scrollable html code to my slide

var pswp = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, [{
    html: '<div class="modal-scroll">... here be long text ...</div>'
}], {
    closeOnScroll: false,
    closeOnVerticalDrag: false,
});

with the appropriate CSS

.modal-scroll {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    overscroll-behavior: none; /* prevents scroll bubbling to window */
}

I prevented registering PhotoSwipe's scroll listeners by overriding the setupDesktopZoom function

pswp.setupDesktopZoom = function() { };
pswp.init();