Skip to main content
Version: 1.2.0

Conveyer

class Conveyer extends Component

Conveyer adds Drag gestures to your Native Scroll.

constructor

new Conveyer(scrollArea, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
scrollAreastring | HTMLElement | Ref<HTMLElement>

A base element for a module

optionsConveyerOptions✔️{}

The option object of the InfiniteGrid module

<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");
</script>

Properties

isReachStart

readonly

Whether the scroll has reached the start.

Type: boolean

Default: false

import { Conveyer } from "@egjs/conveyer";

const conveyer = new Conveyer(".container");

conveyer.isReachStart

isReachEnd

readonly

Whether the scroll has reached the end.

Type: boolean

Default: false

import { Conveyer } from "@egjs/conveyer";

const conveyer = new Conveyer(".container");

conveyer.isReachEnd

scrollPos

readonly

the scroll position of the container

Type: number

Default: 0

import { Conveyer } from "@egjs/conveyer";

const conveyer = new Conveyer(".container");

conveyer.scrollPos

Methods

findElement

Finds an element for that direction.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direction"start" | "end" | "prev" | "next"

direction of the element. "start" and "end" find inside. "prev" and "next" find outside.

optionsFindItemOptions✔️{}

Options for the findElement method.

See:

findItem

Finds an item for an element or its direction.

Returns: ConveyerItem | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
targetHTMLElement | "start" | "end" | "prev" | "next"

direction of the element. "start" and "end" find inside. "prev" and "next" find outside.

optionsFindItemOptions✔️{}

Options for the findItem method.

See:

scrollIntoView

Scrolls an element or an item in that direction into the view.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
targetHTMLElement | "start" | "end" | "prev" | "next"

direction of the element. "start" and "end" find inside. "prev" and "next" find outside.

optionsScrollIntoViewOptions✔️{}

Options for the scrollIntoView method.

See:

scrollBy

Scrolls by the given position amount.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumber

Amount of position to scroll by.

duration✔️0

Duration to scroll by that position.

scrollTo

Scroll to the given position.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumber

Amount of position to scroll to.

duration✔️0

Duration to scroll to that position.

setItems

Set the items directly to the Conveyer.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsConveyerItem[]

Items to set on Conveyer

updateItems

Update the position and size information of items.

updateContainer

Update container size and scroll size.

update

Updating containers and items.

init

If you use the autoInit option as false, you can initialize it directly through the init method.

destroy

Releases the instnace and events.

trigger

inherited

Trigger a custom event.

Returns: this

  • An instance of the component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent

The name of the custom event to be triggered or an instance of the ComponentEvent

paramsArray<any> | $ts:...

Event data to be sent when triggering a custom event

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
beforeHi: ComponentEvent<{ foo: number; bar: string }>;
hi: { foo: { a: number; b: boolean } };
someEvent: (foo: number, bar: string) => void;
someOtherEvent: void; // When there's no event argument
}> {
some(){
if(this.trigger("beforeHi")){ // When event call to stop return false.
this.trigger("hi");// fire hi event.
}
}
}

const some = new Some();
some.on("beforeHi", e => {
if(condition){
e.stop(); // When event call to stop, `hi` event not call.
}
// `currentTarget` is component instance.
console.log(some === e.currentTarget); // true

typeof e.foo; // number
typeof e.bar; // string
});
some.on("hi", e => {
typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once

inherited

Executed event just one time.

Returns: this

  • An instance of the component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $ts:...✔️

The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: ComponentEvent;
}> {
hi() {
alert("hi");
}
thing() {
this.once("hi", this.hi);
}
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens

hasOn

inherited

Checks whether an event has been attached to a component.

Returns: boolean

  • Indicates whether the event is attached.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring

The name of the event to be attached

import Component from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
some() {
this.hasOn("hi");// check hi event.
}
}

on

inherited

Attaches an event to a component.

Returns: this

  • An instance of a component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $ts:...✔️

The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
hi() {
console.log("hi");
}
some() {
this.on("hi",this.hi); //attach event
}
}

off

inherited

Detaches an event from the component.
If the eventName is not given this will detach all event handlers attached.
If the handlerToDetach is not given, this will detach all event handlers for eventName.

Returns: this

  • An instance of a component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...✔️

The name of the event to be detached

handlerToDetachfunction | $ts:...✔️

The handler function of the event to be detached

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
hi() {
console.log("hi");
}
some() {
this.off("hi",this.hi); //detach event
}
}

Events

reachStart

This event is fired when scroll reach start.

leaveStart

This event is fired when scroll leave start.

reachEnd

This event is fired when scroll reach end.

leaveEnd

This event is fired when scroll leave end.

beginScroll

This event is fired when begin scroll.

finishScroll

This event is fired when finish scroll.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eOnFinishScroll

The object of data to be sent to an event