# 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
tip: Base library Nesting is not supported below 2.4.0textarea、map、canvas、videoassemblytip:scroll-into-viewHas a higher priority thanscroll-toptip: Rollingscroll-viewPrevents the page from bouncing back, so in thescroll-viewScrolling in is untriggeredonPullDownRefreshtip: To use a drop-down refresh, use page scrolling instead ofscroll-viewCan also be returned to the top of the page by clicking on the top status bartip: scroll-view Custom drop - down refresh can be combined with WXS Event response Develop interactive animation