Open quankhuc opened 1 year ago
@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);
};
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,
}
Please let me know what I didn't do right. Thank you!
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.
@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
Environments
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:
https://user-images.githubusercontent.com/71282105/233439628-57bc5d38-a70c-48f1-96da-a1c6275ee4d6.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