# scroll-view

Start from base library version 1.0.0. Please remaining backward compatible.

Scrollable view area. When using vertical scrolling, you need to give scroll-view a fixed height, through the WXSS Set up height。 The unit of length of the component attribute defaults to px, Support incoming units from 2.4.0 (rpx/px)。

attribute type Default value Required Introductions Minimum version
scroll-x boolean false no Allow horizontal rolling 1.0.0
scroll-y boolean false no Allow longitudinal rolling 1.0.0
upper-threshold number/string 50 no Top/How far to the left, triggers. scrolltoupper event 1.0.0
lower-threshold number/string 50 no Bottom of Talus/How far to the right, triggers. scrolltolower event 1.0.0
scroll-top number/string no Set Vertical Scroll Bar Position 1.0.0
scroll-left number/string no Set Horizontal Scroll Bar Location 1.0.0
scroll-into-view string no The value should be a child element id (id cannot begin with a number). Sets which direction to scroll, then scrolls to the element in which direction 1.0.0
scroll-with-animation boolean false no Use animation transitions when setting scroll bar position 1.0.0
enable-back-to-top boolean false no IOS click on the top status bar, Android double-click the title bar, scroll bar back to the top, only support vertical 1.0.0
enable-flex boolean false no Enable flexbox Layout. When enabled, the current node declares the display: flex Will become flex Container and acts on its child nodes. 2.7.3
scroll-anchoring boolean false no open scroll anchoring Property that controls the scrolling position to shake without changing content, and only in the iOS Under the effective Android under reference CSS overflow-anchor Property. 2.8.2
refresher-enabled boolean false no Open custom drop-down refresh 2.10.1
refresher-threshold number 45 no Set a custom drop-down refresh threshold 2.10.1
refresher-default-style string "black" no Set custom drop-down refresh default style, support settings black | white | none, none Indicates that the default style is not used 2.10.1
refresher-background string "#FFF" no Set the custom drop-down refresh area background color 2.10.1
refresher-triggered boolean false no Set current pull - down refresh status, true Indicates that the pull down refresh has been triggered, false Indicates that the drop-down refresh is not triggered 2.10.1
enhanced boolean false no Enable scroll-view Enhanced features are enabled by ScrollViewContext operation scroll-view 2.12.0
bounces boolean true no iOS lower scroll-view Boundary elastic control (Simultaneously open enhanced Takes effect after attribute) 2.12.0
show-scrollbar boolean true no Scrollbar implicit control (Simultaneously open enhanced Takes effect after attribute) 2.12.0
paging-enabled boolean false no Paging slide effect (Simultaneously open enhanced Takes effect after attribute) 2.12.0
fast-deceleration boolean false no Sliding speed control (Simultaneously open enhanced Takes effect after attribute) 2.12.0
binddragstart eventhandle no Sliding Start Event (Simultaneously open enhanced Takes effect after attribute) detail { scrollTop, scrollLeft } 2.12.0
binddragging eventhandle no Sliding event (Simultaneously open enhanced Takes effect after attribute) detail { scrollTop, scrollLeft } 2.12.0
binddragend eventhandle no Slide End Event (Simultaneously open enhanced Takes effect after attribute) detail { scrollTop, scrollLeft, velocity } 2.12.0
bindscrolltoupper eventhandle no Scroll to the top/Triggered on the left 1.0.0
bindscrolltolower eventhandle no Scroll to the bottom/Triggered on the right 1.0.0
bindscroll eventhandle no Triggered when scrolling, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 1.0.0
bindrefresherpulling eventhandle no Custom drop-down refresh control is pulled down 2.10.1
bindrefresherrefresh eventhandle no Custom drop-down refresh is triggered 2.10.1
bindrefresherrestore eventhandle no Custom drop-down refresh is reset 2.10.1
bindrefresherabort eventhandle no Custom drop-down refresh aborted 2.10.1

# Bug & Tip

  1. tip: Base library Nesting is not supported below 2.4.0textareamapcanvasvideo assembly
  2. tip: scroll-into-view Has a higher priority than scroll-top
  3. tip: Rolling scroll-view Prevents the page from bouncing back, so in the scroll-view Scrolling in is untriggered onPullDownRefresh
  4. tip: To use a drop-down refresh, use page scrolling instead of scroll-view Can also be returned to the top of the page by clicking on the top status bar
  5. tip: scroll-view Custom drop - down refresh can be combined with WXS Event response Develop interactive animation

# sample code

Preview with Developer Tool

# scroll-view Custom drop-down refresh sample

Preview with Developer Tool