CheckScroll() is not a function and the blue selecting square does not scroll the elements div

[quankhuc]

Environments

• Framework name: NuxtJS
• Framework version: Nuxt 3
• Component name: vue3-selecto
• Component version: 1.8.2
• Testable Address(optional):

Description

I tried to use the example code, "Select in the scroll area", in my modal component. I used the latest setup api and composition syntax, instead of options API syntax, but expect it to act the same. When I tried to scroll the container that has my items to select, the container will not scroll. I also see error messages that my ref "selecto" does not have the method checkScroll(). I attached a video to describe the behavior:

Screen.Recording.2023-04-20.at.12.11.45.PM.mov

Here is the panel modal code in my repo:
Panel Modal component

I appreciate any helps I can have to get it working! Thank you

[daybrush]

@quankhuc

use scrollOptions and scroll event

:scrollOptions="scrollOptions"
@scroll="onScroll"

const scrollOptions =  {
        container: () => document.documentElement,
        throttleTime: 20,
        checkScrollEvent: true,
};

const onScroll = ({ direction, container }) => {
    container.scrollBy(direction[0] * 10, direction[1] * 10);
};

[quankhuc]

It still did not work. It still gave me the error that it did not recognize checkScroll() is a function of the ref "selecto". It also did not scroll the selecting area as well.

Here is snippet of my VueSelecto

<VueSelecto
      ref="selecto"
      dragContainer=".elements"
      v-bind:selectableTargets="['.selecto-area .cube']"
      v-bind:hitRate="0"
      v-bind:selectByClick="true"
      v-bind:selectFromInside="true"
      v-bind:toggleContinueSelect="['shift']"
      v-bind:ratio="0"
      @dragStart="onDragStart"
      @select="onSelect"
      @scroll="onScroll"
      :scrollOptions="scrollOptions"
/>

Here is snippet of my onScroll() and onScrollerScroll() and scrollOptions:

const onScroll = ({direction, container }) => {
  container.scrollBy(direction[0] * 10, direction[1] * 10);
};

const onScrollerScroll = () => {
  selecto.checkScroll();
};

const scrollOptions = {
  container: () => document.documentElement,
  throttleTime: 20,
  checkScrollEvent: true,
}

Panel Modal code

Please let me know what I didn't do right. Thank you!

[quankhuc]

I finally figured it out the package way of scrolling an element and have the scrollOptions value to be assigned at the mounted state and have its container property to be the ref scroller.

[daybrush]

@quankhuc

Take a selecto with the console.

It is an example of selecto, but it works.

https://stackblitz.com/edit/nuxt-starter-ztkeam?file=package.json,app.vue