Class CustomScroll<StaticProps, ChangeableProps, CallbacksTypes>

Custom smooth scrolling component that replaces native scrolling behavior. It provides smooth interpolation, custom scroll events, and integration with other elements.

Requires

Requires styles: @import '~vevet/lib/styles/components/CustomScroll';

Hierarchy

Component<StaticProps, ChangeableProps, CallbacksTypes>
- CustomScroll

Implements

IScrollLike

Constructors

constructor

new CustomScroll<StaticProps, ChangeableProps, CallbacksTypes>(initialProps?, canInit?): CustomScroll<StaticProps, ChangeableProps, CallbacksTypes>
Type Parameters
- StaticProps extends NCustomScroll.IStaticProps = NCustomScroll.IStaticProps
- ChangeableProps extends NCustomScroll.IChangeableProps = NCustomScroll.IChangeableProps
- CallbacksTypes extends NCustomScroll.ICallbacksTypes = NCustomScroll.ICallbacksTypes
Parameters
- Optional initialProps: StaticProps & ChangeableProps
- canInit: boolean = true
Returns CustomScroll<StaticProps, ChangeableProps, CallbacksTypes>
Overrides Component.constructor
- Defined in src/components/CustomScroll/index.ts:231

Accessors

callbacks

get callbacks(): Callbacks<CallbacksTypes>
Retrieves the module's registered callbacks.

Returns Callbacks<CallbacksTypes>
Inherited from ComponentClass.callbacks
- Defined in src/base/Module/index.ts:79

clientHeight

get clientHeight(): number
The container height

Returns number
Implementation of IScrollLike.clientHeight
- Defined in src/components/CustomScroll/index.ts:183

clientWidth

get clientWidth(): number
The container width

Returns number
Implementation of IScrollLike.clientWidth
- Defined in src/components/CustomScroll/index.ts:175

container

get container(): HTMLElement
Scroll container element

Returns HTMLElement
- Defined in src/components/CustomScroll/index.ts:66

hasScroll

get hasScroll(): boolean
The container has scroll

Returns boolean
- Defined in src/components/CustomScroll/index.ts:204

isCustomScroll

get isCustomScroll(): boolean
If the component is a custom scroll

Returns boolean
- Defined in src/components/CustomScroll/index.ts:227

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from ComponentClass.isDestroyed
- Defined in src/base/Module/index.ts:118

isInitialized

get isInitialized(): boolean
Checks if the module has been initialized.

Returns boolean
Inherited from ComponentClass.isInitialized
- Defined in src/base/Module/index.ts:108

maxScrollableHeight

get maxScrollableHeight(): number
Maximum scrollable area of the Y axis

Returns number
- Defined in src/components/CustomScroll/index.ts:199

maxScrollableWidth

get maxScrollableWidth(): number
Maximum scrollable area of the X axis

Returns number
- Defined in src/components/CustomScroll/index.ts:194

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from ComponentClass.name
- Defined in src/base/Module/index.ts:93

prefix

get prefix(): string
Optional prefix for class names used by the module

Returns string
Overrides ComponentClass.prefix
- Defined in src/components/CustomScroll/index.ts:58

props

get props(): TRequiredModuleProp<StaticProps & ChangeableProps>
The current properties of the module, which include both static and changeable properties. These can be retrieved dynamically during the module's lifecycle.

Returns TRequiredModuleProp<StaticProps & ChangeableProps>
Inherited from ComponentClass.props
- Defined in src/base/Module/index.ts:64

scrollHeight

get scrollHeight(): number
The scroll width of the container

Returns number
Implementation of IScrollLike.scrollHeight
- Defined in src/components/CustomScroll/index.ts:167

scrollLeft

get scrollLeft(): number
The current scrollLeft value

Returns number
Implementation of IScrollLike.scrollLeft
- Defined in src/components/CustomScroll/index.ts:123
set scrollLeft(value): void
Parameters
- value: number
Returns void
Implementation of IScrollLike.scrollLeft
- Defined in src/components/CustomScroll/index.ts:127

scrollTop

get scrollTop(): number
The current scrollTop value

Returns number
Implementation of IScrollLike.scrollTop
- Defined in src/components/CustomScroll/index.ts:141
set scrollTop(value): void
Parameters
- value: number
Returns void
Implementation of IScrollLike.scrollTop
- Defined in src/components/CustomScroll/index.ts:145

scrollWidth

get scrollWidth(): number
The scroll width of the container

Returns number
Implementation of IScrollLike.scrollWidth
- Defined in src/components/CustomScroll/index.ts:159

targetLeft

get targetLeft(): number
The scrollLeft target value

Returns number
- Defined in src/components/CustomScroll/index.ts:87
set targetLeft(value): void
Parameters
- value: number
Returns void
- Defined in src/components/CustomScroll/index.ts:91

targetTop

get targetTop(): number
The scrollTop target value

Returns number
- Defined in src/components/CustomScroll/index.ts:105
set targetTop(value): void
Parameters
- value: number
Returns void
- Defined in src/components/CustomScroll/index.ts:109

wrapper

get wrapper(): HTMLElement
Scroll wrapper. If the element does not exist indide the container, it will be created automatically

Returns HTMLElement
- Defined in src/components/CustomScroll/index.ts:79

Methods

addCallback

addCallback<T>(target, action, settings?): IAddedCallback
Adds a custom callback to the module.
Type Parameters
- T extends string | number | symbol
Parameters
- target: T
  
  The event type to listen for (e.g., 'propsChange', 'destroy').
- action: TAction<CallbacksTypes[T]>
  
  The function to execute when the event is triggered.
- settings: ISettings = {}
  
  Additional settings for the callback.
Returns IAddedCallback
Inherited from Component.addCallback
- Defined in src/base/Module/index.ts:245

addEventListener

addEventListener<Target, Listener>(element, target, callback, options?): (() => void)
Adds a DOM event listener that will be automatically removed when the module is destroyed.
Type Parameters
- Target extends keyof HTMLElementEventMap
- Listener extends ((event) => void)
Parameters
- element: Document | Element | Window
  
  The target element for the event listener.
- target: Target
  
  The event type to listen for (e.g., 'click', 'resize').
- callback: Listener
  
  The callback function to execute when the event is triggered.
- Optional options: boolean | AddEventListenerOptions
  
  Additional options for the event listener.
Returns (() => void)
- - (): void
  - Returns void
Inherited from Component.addEventListener
- Defined in src/base/Module/index.ts:261

addPlugin

addPlugin<T>(plugin): void
Adds a plugin to the component. The plugin is initialized upon being added, and the plugin's component property is set to the current component instance.
Type Parameters
- T extends Plugin<any, any, any, any>
Parameters
- plugin: T
  
  An instance of the Plugin class to be added.
Returns void
Inherited from Component.addPlugin
- Defined in src/base/Component/index.ts:30

addResponsiveProps

addResponsiveProps(rules): void
Adds responsive property rules to the module. This must be done before initialization.
Parameters
- rules: IResponsive<ChangeableProps>
  
  The responsive property rules to be added.
Returns void
Inherited from Component.addResponsiveProps
- Defined in src/base/Module/index.ts:159

addViewportCallback

addViewportCallback(target, action, data?): void
Adds a viewport callback that will be automatically removed when the module is destroyed.
Parameters
- target: keyof IViewportCallbackTypes
  
  The viewport target (e.g., width or height).
- action: (() => void)
  
  The callback function to execute when the viewport target changes.
  - - (): void
    - Returns void
- data: undefined | ISettings = {}
  
  Additional data for the callback.
Returns void
Inherited from Component.addViewportCallback
- Defined in src/base/Module/index.ts:225

changeProps

changeProps(props): void
Updates the changeable properties of the module.
Parameters
- props: Partial<ChangeableProps>
  
  The properties to be updated.
Returns void
Inherited from Component.changeProps
- Defined in src/base/Module/index.ts:174

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Component.destroy
- Defined in src/base/Module/index.ts:310

handleWheel

handleWheel(event): void
Event on wheel
Parameters
- event: WheelEvent
Returns void
- Defined in src/components/CustomScroll/index.ts:430

init

init(): void
Initializes the module. Calls the internal _init method and marks the module as initialized.

Returns void
Inherited from Component.init
- Defined in src/base/Module/index.ts:194

render

render(): void
Render elements

Returns void
- Defined in src/components/CustomScroll/index.ts:497

resize

resize(isNative?): void
Resize the scene
Parameters
- isNative: boolean = false
Returns void
- Defined in src/components/CustomScroll/index.ts:377

scrollTo

scrollTo(__namedParameters): void
Scroll to
Parameters
- __namedParameters: ScrollToOptions
Returns void
Implementation of IScrollLike.scrollTo
- Defined in src/components/CustomScroll/index.ts:588

Class CustomScroll<StaticProps, ChangeableProps, CallbacksTypes>

Requires

Link

Link

Type Parameters

StaticProps extends NCustomScroll.IStaticProps = NCustomScroll.IStaticProps

ChangeableProps extends NCustomScroll.IChangeableProps = NCustomScroll.IChangeableProps

CallbacksTypes extends NCustomScroll.ICallbacksTypes = NCustomScroll.ICallbacksTypes

Hierarchy

Implements

Index

Constructors

Accessors

Methods

Constructors

constructor

Type Parameters

StaticProps extends NCustomScroll.IStaticProps = NCustomScroll.IStaticProps

ChangeableProps extends NCustomScroll.IChangeableProps = NCustomScroll.IChangeableProps

CallbacksTypes extends NCustomScroll.ICallbacksTypes = NCustomScroll.ICallbacksTypes

Parameters

Optional initialProps: StaticProps & ChangeableProps

canInit: boolean = true

Returns CustomScroll<StaticProps, ChangeableProps, CallbacksTypes>

Accessors

callbacks

Returns Callbacks<CallbacksTypes>

clientHeight

Returns number

clientWidth

Returns number

container

Returns HTMLElement

hasScroll

Returns boolean

isCustomScroll

Returns boolean

isDestroyed

Returns boolean

isInitialized

Returns boolean

maxScrollableHeight

Returns number

maxScrollableWidth

Returns number

name

Returns string

prefix

Returns string

props

Returns TRequiredModuleProp<StaticProps & ChangeableProps>

scrollHeight

Returns number

scrollLeft

Returns number

Parameters

value: number

Returns void

scrollTop

Returns number

Parameters

value: number

Returns void

scrollWidth

Returns number

targetLeft

Returns number

Parameters

value: number

Returns void

targetTop

Returns number

Parameters

value: number

Returns void

wrapper

Returns HTMLElement

Methods

addCallback

Type Parameters

`Optional` initialProps: StaticProps & ChangeableProps

`Optional` options: boolean | AddEventListenerOptions