Class SmoothScroll<StaticProps, ChangeableProps, CallbacksTypes>

Smooth scrolling

Type Parameters

StaticProps extends NSmoothScroll.IStaticProps = NSmoothScroll.IStaticProps
ChangeableProps extends NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps
CallbacksTypes extends NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes

Hierarchy

Component<StaticProps, ChangeableProps, CallbacksTypes>
- SmoothScroll

Implements

IScrollLike

Index

Constructors

constructor

Properties

_animationFrame _clientHeight _clientWidth _container _disableDelayDebounce? _elements _frameIndex _isEqualLerp _isInstant? _scrollHeight _scrollLeft _scrollTop _scrollWidth _targetLeft _targetTop _wrapperHeight _wrapperWidth

Constructors

constructor

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

Properties

`Protected` _animationFrame

_animationFrame: AnimationFrame

Animation frame

`Protected` _clientHeight

_clientHeight: number

Container height

`Protected` _clientWidth

_clientWidth: number

Container width

`Protected` _container

_container: HTMLElement

Scroll container

`Protected` `Optional` _disableDelayDebounce

_disableDelayDebounce?: Timeout

_disable timeout

`Protected` _elements

_elements: Elements

`Protected` _frameIndex

_frameIndex: number

Frame index

`Protected` _isEqualLerp

_isEqualLerp: boolean

Equal lerp for all elements

`Protected` `Optional` _isInstant

_isInstant?: boolean

If the approximation between the target and current scroll values must be instantaneous

`Protected` _scrollHeight

_scrollHeight: number

Scroll height

`Protected` _scrollLeft

_scrollLeft: number

scrollLeft

`Protected` _scrollTop

_scrollTop: number

scrollTop

`Protected` _scrollWidth

_scrollWidth: number

Scroll width

`Protected` _targetLeft

_targetLeft: number

scrollLeft target value

`Protected` _targetTop

_targetTop: number

scrollTop target value

`Protected` _wrapperHeight

_wrapperHeight: number

Wrapper height

`Protected` _wrapperWidth

_wrapperWidth: number

Wrapper width

Accessors

app

get app(): Application
Vevet Application

Returns Application
Inherited from ComponentClass.app
- Defined in src/base/Module/index.ts:68

callbacks

get callbacks(): Callbacks<CallbacksTypes>
Module Callbacks

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

clientHeight

get clientHeight(): number
Container height

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

clientWidth

get clientWidth(): number
Container width

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

container

get container(): HTMLElement
Scroll container

Returns HTMLElement
- Defined in src/components/SmoothScroll/index.ts:56

hasScroll

get hasScroll(): boolean
Has scroll

Returns boolean
- Defined in src/components/SmoothScroll/index.ts:191

isDestroyed

get isDestroyed(): boolean
The module is destroyed

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

isInitialized

get isInitialized(): boolean
The module is initialized

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

isSmoothScroll

get isSmoothScroll(): boolean
Returns boolean
- Defined in src/components/SmoothScroll/index.ts:210

maxScrollableHeight

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

Returns number
- Defined in src/components/SmoothScroll/index.ts:186

maxScrollableWidth

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

Returns number
- Defined in src/components/SmoothScroll/index.ts:181

name

get name(): string
Module name

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

prefix

get prefix(): string
Module prefix

Returns string
Overrides ComponentClass.prefix
- Defined in src/components/SmoothScroll/index.ts:48

props

get props(): TRequiredModuleProp<StaticProps & ChangeableProps>
Current properties

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

scrollHeight

get scrollHeight(): number
Scroll height

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

scrollLeft

get scrollLeft(): number
scrollLeft

Returns number
Implementation of IScrollLike.scrollLeft
- Defined in src/components/SmoothScroll/index.ts:110
set scrollLeft(value): void
Parameters
- value: number
Returns void
Implementation of IScrollLike.scrollLeft
- Defined in src/components/SmoothScroll/index.ts:114

scrollTop

get scrollTop(): number
scrollTop

Returns number
Implementation of IScrollLike.scrollTop
- Defined in src/components/SmoothScroll/index.ts:128
set scrollTop(value): void
Parameters
- value: number
Returns void
Implementation of IScrollLike.scrollTop
- Defined in src/components/SmoothScroll/index.ts:132

scrollWidth

get scrollWidth(): number
Scroll width

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

targetLeft

get targetLeft(): number
scrollLeft target value

Returns number
- Defined in src/components/SmoothScroll/index.ts:74
set targetLeft(value): void
Parameters
- value: number
Returns void
- Defined in src/components/SmoothScroll/index.ts:78

targetTop

get targetTop(): number
scrollTop target value

Returns number
- Defined in src/components/SmoothScroll/index.ts:92
set targetTop(value): void
Parameters
- value: number
Returns void
- Defined in src/components/SmoothScroll/index.ts:96

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/SmoothScroll/index.ts:66

Methods

`Protected` _calcElementsValues

_calcElementsValues(): void
Calculate elements' values

Returns void
- Defined in src/components/SmoothScroll/index.ts:502

`Protected` _calcScrollValues

_calcScrollValues(): void
Calculate scroll values

Returns void
- Defined in src/components/SmoothScroll/index.ts:496

`Protected` _checkAutoStop

_checkAutoStop(): void
Make auto stop if the target and current values are equal

Returns void
- Defined in src/components/SmoothScroll/index.ts:524

`Protected` _destroy

_destroy(): void
Destroy the module

Returns void
Overrides Component._destroy
- Defined in src/components/SmoothScroll/index.ts:589

`Protected` _disable

_disable(): void
Disable scrolling

Returns void
- Defined in src/components/SmoothScroll/index.ts:468

`Protected` _enable

_enable(): void
Enable scrolling

Returns void
- Defined in src/components/SmoothScroll/index.ts:459

`Protected` _getDefaultProps

_getDefaultProps(): DeepRequired<StaticProps & ChangeableProps> & {
    animationFrame: boolean;
    container: string;
    direction: string;
    elements: boolean;
    hasStopPropagation: boolean;
    hasWheel: boolean;
    hasWillChange: boolean;
    isEnabled: boolean;
    isFpsNormalized: boolean;
    isInversedHandlerDirection: boolean;
    lerp: number;
    lerpApproximation: number;
    resizeDebounce: number;
    shouldAutoStop: boolean;
    translatePrecision: number;
    viewportTarget: string;
}
Get Default properties (should be extended)

Returns DeepRequired<StaticProps & ChangeableProps> & {
    animationFrame: boolean;
    container: string;
    direction: string;
    elements: boolean;
    hasStopPropagation: boolean;
    hasWheel: boolean;
    hasWillChange: boolean;
    isEnabled: boolean;
    isFpsNormalized: boolean;
    isInversedHandlerDirection: boolean;
    lerp: number;
    lerpApproximation: number;
    resizeDebounce: number;
    shouldAutoStop: boolean;
    translatePrecision: number;
    viewportTarget: string;
}
Overrides Component._getDefaultProps
- Defined in src/components/SmoothScroll/index.ts:26

`Protected` _getLerp

_getLerp(element?): number
Get lerp
Parameters
- Optional element: NSmoothScroll.IElement
Returns number
- Defined in src/components/SmoothScroll/index.ts:551

`Protected` _init

_init(): void
Inner extra initialization

Returns void
Overrides Component._init
- Defined in src/components/SmoothScroll/index.ts:270

`Protected` _lerp

_lerp(current, target, ease?): number
Interpolate values
Parameters
- current: number
- target: number
- ease: number = ...
Returns number
- Defined in src/components/SmoothScroll/index.ts:541

`Protected` _onPropsMutate

_onPropsMutate(): void
Handle properties mutation

Returns void
Overrides Component._onPropsMutate
- Defined in src/components/SmoothScroll/index.ts:335

`Protected` _recalculateScrollSizes

_recalculateScrollSizes(): void
Recalculate scroll sizes

Returns void
- Defined in src/components/SmoothScroll/index.ts:345

`Protected` _resize

_resize(isNative?): void
Resize the scene
Parameters
- isNative: boolean = false
  
  If the method was called natively on window resize
Returns void
- Defined in src/components/SmoothScroll/index.ts:368

`Protected` _setDirectionClassNames

_setDirectionClassNames(isActive): void
Parameters
- isActive: boolean
Returns void
- Defined in src/components/SmoothScroll/index.ts:277

`Protected` _setEvents

_setEvents(): void
Set events

Returns void
- Defined in src/components/SmoothScroll/index.ts:288

`Protected` _setResize

_setResize(): void
Set resize events

Returns void
- Defined in src/components/SmoothScroll/index.ts:304

`Protected` _toggle

_toggle(): void
Toggle animation: Enable / Disable scrolling

Returns void
- Defined in src/components/SmoothScroll/index.ts:450

addCallback

addCallback<T>(target, action, settings?): IAddedCallback
Add a module callback
Type Parameters
- T extends string | number | symbol
Parameters
- target: T
- action: TAction<CallbacksTypes[T]>
- settings: ISettings = {}
Returns IAddedCallback
Inherited from Component.addCallback
- Defined in src/base/Module/index.ts:245

`Protected` addDestroyableAction

addDestroyableAction(action): void
Add destroyable actions
Parameters
- action: (() => void)
  - - (): void
    - Returns void
Returns void
Inherited from Component.addDestroyableAction
- Defined in src/base/Module/index.ts:224

addEventListener

addEventListener<El, Target, Callback>(el, target, callback, options?): IAddEventListener
Add a DOM event listener
Type Parameters
- El extends ListenerElement
- Target extends keyof HTMLElementEventMap
- Callback extends ((evt) => void)
Parameters
- el: El
- target: Target
- callback: Callback
- Optional options: IAddEventListenerOptions
Returns IAddEventListener
Inherited from Component.addEventListener
- Defined in src/base/Module/index.ts:254

addPlugin

addPlugin<T>(plugin): void
Add a single plugin
Type Parameters
- T extends Plugin<any, any, any, any>
Parameters
- plugin: T
Returns void
Inherited from Component.addPlugin
- Defined in src/base/Component/index.ts:21

addResponsiveProps

addResponsiveProps(rules): void
Add responsive rules
Parameters
- rules: IResponsive<ChangeableProps>
Returns void
Inherited from Component.addResponsiveProps
- Defined in src/base/Module/index.ts:173

addViewportCallback

addViewportCallback(target, action, data?): void
Add a viewport callback that will be removed on class destroy
Parameters
- target: keyof NViewport.ICallbacksTypes
- action: ((arg) => void)
  - - (arg): void
    - Parameters
      
      arg: IChanges
      
      Returns void
- data: undefined | ISettings = {}
Returns void
Inherited from Component.addViewportCallback
- Defined in src/base/Module/index.ts:231

changeProps

changeProps(props): void
Change module properties
Parameters
- props: Partial<ChangeableProps>
Returns void
Inherited from Component.changeProps
- Defined in src/base/Module/index.ts:184

`Protected` className

className(...classNames): string
Parameters
- Rest ...classNames: string[]
Returns string
Inherited from Component.className
- Defined in src/base/Module/index.ts:279

destroy

destroy(): void
Destroy the module

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

handleWheel

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

init

init(): void
Initializes the class

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

render

render(): void
Render elements

Returns void
- Defined in src/components/SmoothScroll/index.ts:473

resize

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

scrollTo

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

`Protected` setTargetLeft

setTargetLeft(value): void
Update targetLeft without animation
Parameters
- value: number
Returns void
- Defined in src/components/SmoothScroll/index.ts:84

`Protected` setTargetTop

setTargetTop(value): void
Update targetTop without animation
Parameters
- value: number
Returns void
- Defined in src/components/SmoothScroll/index.ts:102

`Protected` toggleClassName

toggleClassName(element, className, isActive): void
Toggle classList
Parameters
- element: Element
- className: string
- isActive: boolean
Returns void
Inherited from Component.toggleClassName
- Defined in src/base/Module/index.ts:284

Class SmoothScroll<StaticProps, ChangeableProps, CallbacksTypes>

Type Parameters

StaticProps extends NSmoothScroll.IStaticProps = NSmoothScroll.IStaticProps

ChangeableProps extends NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps

CallbacksTypes extends NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes

Hierarchy

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Type Parameters

StaticProps extends NSmoothScroll.IStaticProps = NSmoothScroll.IStaticProps

ChangeableProps extends NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps

CallbacksTypes extends NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes

Parameters

Optional initialProps: StaticProps & ChangeableProps

canInit: boolean = true

Returns SmoothScroll<StaticProps, ChangeableProps, CallbacksTypes>

Properties

Protected _animationFrame

Protected _clientHeight

Protected _clientWidth

Protected _container

Protected Optional _disableDelayDebounce

Protected _elements

Protected _frameIndex

Protected _isEqualLerp

Protected Optional _isInstant

Protected _scrollHeight

Protected _scrollLeft

Protected _scrollTop

Protected _scrollWidth

Protected _targetLeft

Protected _targetTop

Protected _wrapperHeight

Protected _wrapperWidth

Accessors

app

Returns Application

callbacks

Returns Callbacks<CallbacksTypes>

clientHeight

Returns number

clientWidth

Returns number

container

Returns HTMLElement

hasScroll

Returns boolean

isDestroyed

Returns boolean

isInitialized

Returns boolean

isSmoothScroll

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

`Optional` initialProps: StaticProps & ChangeableProps

`Protected` _animationFrame

`Protected` _clientHeight

`Protected` _clientWidth

`Protected` _container

`Protected` `Optional` _disableDelayDebounce

`Protected` _elements

`Protected` _frameIndex

`Protected` _isEqualLerp

`Protected` `Optional` _isInstant

`Protected` _scrollHeight

`Protected` _scrollLeft

`Protected` _scrollTop

`Protected` _scrollWidth

`Protected` _targetLeft

`Protected` _targetTop

`Protected` _wrapperHeight

`Protected` _wrapperWidth

`Protected` _calcElementsValues

`Protected` _calcScrollValues

`Protected` _checkAutoStop

`Protected` _destroy

`Protected` _disable

`Protected` _enable

`Protected` _getDefaultProps

`Protected` _getLerp

`Optional` element: NSmoothScroll.IElement

`Protected` _init

`Protected` _lerp

`Protected` _onPropsMutate

`Protected` _recalculateScrollSizes

`Protected` _resize

`Protected` _setDirectionClassNames

`Protected` _setEvents

`Protected` _setResize

`Protected` _toggle

`Protected` addDestroyableAction