I tried making caption text scrollable with overflow-y:scroll & -webkit-overflow-scrolling: touch during the development. There are too much problems with it.
First of, if you disable preventDefault on touchstart and touchmove and try to scroll caption container - page itself starts scrolling.
Secondly, caption covers swiping area. So big part of gallery would be inactive. Especially when phone is in landscape orientation.
So PhotoSwipe always prevents touchmove, and allows to override only touchstart/touchend (to make links and text selection work).
My advice, is that if you have very long captions, try avoiding them in PhotoSwipe, or add some "view more" button that will expand caption to 100% width/height of viewport.
hmm... but i really need any way to allow scrolling using -webkit-overflow-scrolling inside the photoswipe interface; there should be any way to solve it, by temporary disabling background or something....
If is not possible with caption, at least when showing a modal popup...
You can create modal popup just by placing it out side of pswp__scroll-wrap, like so:
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__ui pswp__ui--hidden">
... UI things ...
<div class="your-modal" style="position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.6);">
Your modal content
all you need is to toggle display and content of .your-modal element. PhotoSwipe applies touch events only to scroll-wrap.
Ok, good to know that Photoswipe only applies to scroll-wrap. Now i only need to integrate that into the photoswipe-ui.js to manage my modal from outside the wrapper, cause i can't use the global tap events then...
Going off topic, i should say that your photoswipe script is really amazing, i'm loving it more and more on every moment. It's really a good work....
You can just add <A> tag anywhere inside .pswp__scroll-wrap. And just bind click event on it. PhotoSwipe doesn't call preventDefault on A tags.
If you check the link http://staging.internationaltravellermag.com/five-uniquely-salzburgian-experiences/#&gid=1&pid=1
this has the pswp__scroll-wrap as 80% and the caption sa 20% but still it has disabled the mouse wheal scrolling.
Cant figure it out .
@rkumarat I have been tasked to come up with a design that is extremely similar to that one, thanks for that link. Basically I'd like the photoswipe section to be on the left at around 80% with 20% caption/text desc area, but only when the viewport is wide enough, e.g. min-width: 1024px. I promise to create a codepen after or during my project showing a basic stripped down version of it.