Lynx
  • English

      • Attributes

      bounces

      iOS
      Clay
      Harmony
      1.4       
      // @defaultValue: true
bounces?: boolean;

      Enable bounce effect

      enable-scroll

      Android
      iOS
      Clay
      Harmony

      1.4

       
      // @defaultValue: true
'enable-scroll'?: boolean;

      Enable dragging

      initial-scroll-offset

      Android
      iOS
      Clay
      Harmony

      2.17

       
      // @defaultValue: 0
'initial-scroll-offset'?: number;

      Initial scroll position, only effective once, in PX

      initial-scroll-to-index

      Android
      iOS
      Clay
      Harmony

      2.17

       
      // @defaultValue: 0
'initial-scroll-to-index'?: number;

      Scroll to specified child node on first screen, only effective once. All direct child nodes must be flatten=false.

      lower-threshold

      Android
      iOS
      Clay
      Harmony

      1.4

       
      // @defaultValue: 0
'lower-threshold'?: number;

      Set upper threshold to bindscrolltoupper event.

      scroll-bar-enable

      iOS
      Clay
      Harmony
      1.4       
      // @defaultValue: true
'scroll-bar-enable'?: boolean;

      Enable scrollbar

      scroll-orientation

      Android
      iOS
      Clay
      Harmony

      3.0

       
      // @defaultValue: 'vertical'
'scroll-orientation'?: 'vertical' | 'horizontal';

      Replacement of scroll-x and scroll-y

      upper-threshold

      Android
      iOS
      Clay
      Harmony

      1.4

       
      // @defaultValue: 0
'upper-threshold'?: number;

      Set upper threshold to bindscrolltoupper event.

      Events

      Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

      bindcontentsizechanged

      Android
      iOS
      Harmony
      1.6       
      bindcontentsizechanged = (e: ContentSizeChangedEvent) => {};

      This event is triggered when the scrollview's content size changed.

      bindscroll

      Android
      iOS
      Clay
      Harmony

      1.4

       
      bindscroll = (e: ScrollEvent) => {};

      This event is triggered when the scrollview is scrolling.

      bindscrollend

      Android
      iOS
      Clay
      Harmony

      1.6

       
      bindscrollend = (e: ScrollEndEvent) => {};

      This event is triggered when the scrollview's scroll ended.

      bindscrolltolower

      Android
      iOS
      Harmony
      1.4       
      bindscrolltolower = (e: ScrollToLowerEvent) => {};

      This event is triggered when the lower/right edge of the scrolling area intersects with the visible area defined by the lowerThreshold.

      bindscrolltoupper

      Android
      iOS
      Harmony
      1.4       
      bindscrolltoupper = (e: ScrollToUpperEvent) => {};

      This event is triggered when the upper/left edge of the scrolling area intersects with the visible area defined by the upperThreshold.

      Methods

      Frontend can invoke component methods via the SelectorQuery API.

      autoScroll

      Android
      iOS
      Clay
      Harmony       
      
lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'autoScroll',
params: {
/**
_ The distance of each second's scrolling, which supports positive and negative values. The unit of distance can be "px", "rpx", "ppx", or null (for iOS, the value must be greater than 1/screen.scale px).
_ @Android
_ @iOS
_ @Harmony
_ @PC
_/
rate: number;
/**
_ Start/stop automatic scrolling.
_ @Android
_ @iOS
_ @Harmony
_ @PC
_/
start: boolean;
};
success: function (res) {},
fail: function (res) {},
})
.exec();

      Automatic scrolling

      getScrollInfo

      Android
      iOS
      Clay
      Harmony       
      
lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'getScrollInfo',
      success: Callback<{
        /**
         * Total scrollable range along orientation, in PX
         * @Android
         * @iOS
         * @Harmony
         * @PC
         */
        scrollRange: number;
        /**
         * Content offset on X-axis, in PX
         * @Android
         * @iOS
         * @Harmony
         * @PC
         */
        scrollX: number;
        /**
         * Content offset on Y-axis, in PX
         * @Android
         * @iOS
         * @Harmony
         * @PC
         */
        scrollY: number;
      }>;
      fail: function (res) {},
    })
    .exec();

      Get scroll info

      scrollBy

      Android
      iOS
      Clay
      Harmony       
      
lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'scrollBy',
params: {
/\*\*
_ Offset to scroll
_/
offset?: number;
};
success: function (res) {},
fail: function (res) {},
})
.exec();

      Scroll by specified offset

      scrollTo

      Android
      iOS
      Clay
      Harmony       
      
lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'scrollTo',
      params: {
        /**
         * Target item index
         * @defaultValue 0
         */
        index?: number;
        /**
         * Offset relative to target node
         */
        offset?: number;
        /**
         * Enable scroll animation
         */
        smooth?: boolean;
      };
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

      Scroll to specified position

      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.