Scroll view - Mobile Platform as a Service - Alibaba Cloud Documentation Center

Movable view area.

Attribute	Type	Default value	Description	Minimum version
class	String	-	External style name.	-
style	String	-	Inline style name.	-
scroll-x	Boolean	false	Horizontal scroll allowed.	-
scroll-y	Boolean	false	Vertical scroll allowed.	-
upper-threshold	Number	50	Distance from the top/left (in px) when the scrolltoupper event is triggered.	-
lower-threshold	Number	50	Distance from the bottom/right (in px) when the scrolltolower event is triggered.	-
scroll-top	Number	-	Position of the vertical scroll bar.	-
scroll-left	Number	-	Position of the horizontal scroll bar.	-
scroll-into-view	String	-	The value is a child element ID. When the element is scrolled to, the top of the element is aligned with the top of the scroll area.	-
scroll-with-animation	Boolean	false	Transition animations are used when the scroll bar position is set.	-
scroll-animation-duration	Number	-	When `scroll-with-animation` is set to true, `scroll-animation-duration` can be set to control the execution time of the animation. The value is in ms.	1.9.0
enable-back-to-top	Boolean	false	When you tap the status bar at the top in iOS or double-tap the title bar in Android, the scroll bar returns to the top. Only vertical scroll is supported.	1.11.0
trap-scroll	Boolean	false	For vertical scroll, when the scroll bar scrolls to the top or bottom, page scrolling is prohibited forcibly. Only the scroll of scroll-view can be triggered.	1.11.2
onScrollToUpper	EventHandle	-	The scrolltoupper event is triggered when the scroll bar scrolls to the top/left.	-
onScrollToLower	EventHandle	-	The scrolltolower event is triggered when the scroll bar scrolls to the bottom/right.	-
onScroll	EventHandle	-	Triggered when scrolling. `event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}`	-
onTouchStart	EventHandle	-	Start the touch action.	1.15.0
onTouchMove	EventHandle	-	Move after the touch action.	1.15.0
onTouchEnd	EventHandle	-	End the touch action.	1.15.0
onTouchCancel	EventHandle	-	Tapping action interrupted by call reminder or pop-up window.	1.15.0

Note: When using vertical scroll, you need to specify a fixed height. You can use acss to set the height.

Code sample

<view class="page">
  <view class="page-description">The scrollable view area</view>
  <view class="page-section">
    <view class="page-section-title">vertical scroll</view>
    <view class="page-section-demo">
      <scroll-view scroll-y="{{true}}" style="height: 200px;" onScrollToUpper="upper" onScrollToLower="lower" onScroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
        <view id="blue" class="scroll-view-item bc_blue"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="green" class="scroll-view-item bc_green"></view>
      </scroll-view>
    </view>
    <view class="page-section-btns">
      <view onTap="tap">next</view>
      <view onTap="tapMove">move</view>
      <view onTap="scrollToTop">scrollToTop</view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">horizontal scroll</view>
    <view class="page-section-demo">
      <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" >
        <view id="blue2" class="scroll-view-item_H bc_blue"></view>
        <view id="red2"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
        <view id="green2" class="scroll-view-item_H bc_green"></view>
      </scroll-view>
    </view>
  </view>
</view>

const order = ['blue', 'red', 'green', 'yellow'];
Page({
  data: {
    toView: 'red',
    scrollTop: 100,
  },
  upper(e) {
    console.log(e);
  },
  lower(e) {
    console.log(e);
  },
  scroll(e) {
    console.log(e.detail.scrollTop);
  },
  scrollToTop(e) {
    console.log(e);
    this.setData({
      scrollTop: 0,
    });
  },
});

Note

The priority of scroll-into-view is higher than that of scroll-top.
The page is prevented from rebounding when scroll-view is scrolled. Therefore, onPullDownRefresh cannot be triggered when scroll happens in scroll-view.