Scrolling elements on scroll

[khawarizmus]

I have some nested slides that i want to make them scroll when the users scrolls (without click and drag). but i can't find how to do that. I would appreciate any help

[malangfox]

Hello @gimyboya.

Depending on which direction the nested Flicking moves, the implementation of this may be different.
We'd like to know about which direction you're implementing Flicknig as nested.
Also, do you mean the vertical scroll gesture on mobile?

I've implemented a similar demo before, but it's not going to perfectly match what you're looking for.
I'd like to know a bit more about what you want. If you have a Demo for this, that would be great.

[khawarizmus]

Hello @malangfox Thank you for the swift reply

my implementation is in Vue 3. I have a horizontal main slider and a vertical nested slides inside each slide:

<template>
  <div class="flex items-center h-full mx-auto justify-evenly">
    <TransitionGroup name="locale">
      <div class="mr-6" key="1">
        <h1 class="mb-12 text-5xl font-bold">Pick a language</h1>
        <Flicking
          ref="lanSliderRef"
          :options="{
            circular: true,
            circularFallback: 'bound',
            horizontal: true,
            defaultIndex: 1,
          }"
        >
          <div
            :class="`p-8 m-2 max-h-96 rounded-3xl border-2 border-black w-96 flex flex-col ${
              language === lang ? 'border-2' : ''
            }`"
            v-for="(lang, i) in languages"
            :key="i"
          >
            <h2 class="mb-12 text-6xl font-semibold text-left">
              {{ lang }}
            </h2>
            <Flicking
              @select="pickLocale(i, $event)"
              :options="{
                circular: true,
                circularFallback: 'bound',
                align: 'prev',
                horizontal: false,
                defaultIndex: 0,
                nested: true,
              }"
            >
              <div
                :class="`p-6 text-left text-xl rounded-xl my-2 ${
                  locale === TimeLocals.get(loc)
                    ? 'bg-black text-white'
                    : 'bg-gray-200'
                }`"
                v-for="(loc, j) in getLocales(lang)"
                :key="j"
              >
                {{ loc }}
              </div>
            </Flicking>
          </div>
          <template #viewport>
            <div class="flicking-pagination"></div>
          </template>
        </Flicking>
      </div>
      <div class="border-l-2 border-black grow" key="2">
        <div class="m-6 font-semibold text-9xl">{{ time }}</div>
        <div class="m-6 text-3xl">{{ date }}</div>
      </div>
    </TransitionGroup>
  </div>
</template>

I want this part to response to scroll events (both from pads and mouse wheel)

<Flicking
              @select="pickLocale(i, $event)"
              :options="{
                circular: true,
                circularFallback: 'bound',
                align: 'prev',
                horizontal: false,
                defaultIndex: 0,
                nested: true,
              }"
            >
              <div
                :class="`p-6 text-left text-xl rounded-xl my-2 ${
                  locale === TimeLocals.get(loc)
                    ? 'bg-black text-white'
                    : 'bg-gray-200'
                }`"
                v-for="(loc, j) in getLocales(lang)"
                :key="j"
              >
                {{ loc }}
              </div>
            </Flicking>

this is how things looks like to give you an idea. I basically want the users to be able to scroll the locales

[khawarizmus]

@malangfox Any idea on this, please?

[malangfox]

@gimyboya

It looks like you want to use a vertical native scroll with vertical Flicking.
Our Flicking component moves the Panel using CSS transform. This is not compatible with a native scroll in the vertical direction.

But you can use the component @egjs/conveyer to move the native vertical scroll through click and drag.
egjs/conveyer is a component that adds a drag gesture to the native scroll.

I made a demo with a vertical conveyer to a part of the Flicking Panel.
It works fine on both desktop and mobile environments.

Maybe trying out our other component can help you.

[malangfox]

Since there is no further comment, we will close the discussion.