[Feature Request] v-slide-group momentum and scroll lock

[jaunt]

Problem to solve

On mobile touch based devices, if you try swiping left and right the experience is not ideal. First, there's no momentum when you let go -- the illusion of physical weight. Second, as you try to swipe through content horizontally, finger movements in the vertical direction cause the screen to scroll up and down unexpectedly.

Proposed solution

Once horizontal swipe intent is determined, vertical scroll passthrough should be temporarily disabled. Add realistic gestures like momentum scrolling: https://material.io/design/interaction/gestures.html

[johnleider]

I would love to do this, but I need help with this particular one.

[johnleider]

Implemented vertical scroll issues in #11571. We'll work on momentum for v3.

[dumptyd]

Changes from #11571 don't let the user scroll at all on phones. https://jsfiddle.net/dumptyd/r96botke/

[AeonFr]

We are experiencing the oposite issue: when the user is clearly trying to scroll vertically, the slider is highjacking the scroll and not producing vertical scroll. This can be tested in the documentation.
This makes the usage of this component as a "carrousel" (or anything that should be full screen) inviable because the user won't be able to continue scrolling on the page

[Elis4beth]

Hi ! Same problem as @AeonFr here. So i added some custom code to improve user experience on mobile.
I used v-touch of vuetify to detect the direction of the scroll (top or bottom) and sweet-scroll to move the screen according to the direction of the touch.

v-touch: https://vuetifyjs.com/en/directives/touch-support/
sweet-scroll: https://github.com/tsuyoshiwada/sweet-scroll

So i have a child component "Slider" where is one of my vuetify sliders. I putted my v-touch on v-slide-item and $emit the event to my parent component:

        <v-slide-item
          v-for="(podcast, index) in data.results"
          :key="'recents-' + index"
          v-touch="{
            left: () => $emit('childSwipe', {'direction': 'Left', 'index': 0}),
            right: () => $emit('childSwipe', {'direction': 'Right', 'index': 0}),
            up: () => $emit('childSwipe', {'direction': 'Up', 'index': 0}),
            down: () => $emit('childSwipe', {'direction': 'Down', 'index': 0})
          }"
        >

As you see, my parent will have the direction and the index of my DOM element. I have 4 sliders on my page so i added #id on each slider "#vertical-position"+index. If you have just only one slider, you don't need this dynamic code and just need to scroll to a static id element on top or bottom according to the direction of the touch (see my parent code below. The scroll go to my header or footer depending on whether it comes from the first slider child or last one)

<template>
<div v-for="(category, key) in categories.results" :key="'category-' + key">
          <Slider :id="'vertical-position-'+key"
                       :category="category"
                       @childSwipe="swipe"
          />
        </div>
</template>

<script>
import SweetScroll from 'sweet-scroll'
const scroller = SweetScroll.create(
  {
    duration: 1000,
    easing: 'easeOutExpo',
  }
)

methods: {
    //Fix scroll problem when mobile user is touching slider
    swipe: function(values) {
      //Only for mobile
      if (this.isMobile) {
        if (values.direction === 'Up') { //go bot
          //If user is on last list, scroll to footer
          if (values.index == 3) {
            scroller.to('.footer')
          } else { //else scroll to next list
            scroller.to('#vertical-position-'+ (values.index+1))
          }

        } else if (values.direction === 'Down') { //go top
          //If user is on first list, scroll to header
          if (values.index == 0) {
            scroller.to('#header')
          } else { //else scroll to above list
            scroller.to('#vertical-position-'+ (values.index-1))
          }
        }
      }
    }
  },
</script>

Hope this can help someone and sorry for my baguette English ;)

[Elis4beth]

Sooo.. my temporary solution above is bad too because this is an assisted scroll (#div to #div), not very smooth. And more important, i reproduced the same problem as @jaunt when navigating on the site and come back on my slider page. I haven't seen it earlier. So i just display a custom div with css overflow-y. Native scroll on mobile is better. And display vuetify slider only on desktop for now.

[AeonFr]

We used vue-awesome-swiper and we're very happy with the API and all the customization options it offers El jue., 30 jul. 2020 16:52, Elis4beth <notifications@github.com> escribió:

…

Sooo.. my temporary solution above is bad too because this is an assisted scroll (#div to #div), not very smooth. And more important, i reproduced the same problem as @jaunt <https://github.com/jaunt> when navigating on the site and come back on my slider page. I haven't seen it earlier. So i just display a custom div with css overflow-y. Native scroll on mobile is better. And display vuetify slider only on desktop for now. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10673 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACZS4IS7ERUABAPLVCPRBWTR6GCKDANCNFSM4K3QP6BA> .

[jaunt]

Vertical scroll seems to be broken as mentioned above.

I have a list of feeds, something like netflix, and now a user can't scroll unless they grab in-between feeds which is awkward and unexpected.

The solution I proposed originally was to only lock vertical scrolling once horizontal scrolling was detected, then release that lock the moment it stopped.

My hack for now, in case it helps anyone:

<style scoped>
>>> .v-slide-group__wrapper {
  touch-action: auto !important;
}
...

[gakinson]

Vertical scroll seems to be broken as mentioned above.

I have a list of feeds, something like netflix, and now a user can't scroll unless they grab in-between feeds which is awkward and unexpected.

The solution I proposed originally was to only lock vertical scrolling once horizontal scrolling was detected, then release that lock the moment it stopped.

My hack for now, in case it helps anyone:

<style scoped>
>>> .v-slide-group__wrapper {
  touch-action: auto !important;
}
...

This was great, I ended up using

touch-action: pan-y !important 

When I used auto, i found my x-axis carousel scrolling was choppy and not as smooth as when I used pan-y.
Thanks for showing this temp fix, it really helped make due for now!

[agustinfranc]

Vertical scroll seems to be broken as mentioned above.
I have a list of feeds, something like netflix, and now a user can't scroll unless they grab in-between feeds which is awkward and unexpected.
The solution I proposed originally was to only lock vertical scrolling once horizontal scrolling was detected, then release that lock the moment it stopped.
My hack for now, in case it helps anyone:

<style scoped>
>>> .v-slide-group__wrapper {
  touch-action: auto !important;
}
...

This was great, I ended up using

touch-action: pan-y !important 

When I used auto, i found my x-axis carousel scrolling was choppy and not as smooth as when I used pan-y.
Thanks for showing this temp fix, it really helped make due for now!

Thanks both!

[mahammad-sixberries]

try this

.v-slide-group__wrapper {
    touch-action: auto;
    overflow: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.