<view class="page-head">
  <view class="page-head-title">scroll-view</view>
  <view class="page-head-line"></view>
</view>

<view class="page-section">
  <view class="page-section-title l-r-padding">
    <text>Vertical Scroll</text>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      style="height: 150px"
      scrollY="{{true}}"
      bindscroll="scroll"
      bindscrolltoupper="upper"
      bindscrolltolower="lower"
    >
      <view id="demo1" class="scroll-view-item demo-text-1">A</view>
      <view id="demo2" class="scroll-view-item demo-text-2">B</view>
      <view id="demo3" class="scroll-view-item demo-text-3">C</view>
    </scroll-view>
  </view>
</view>

<view class="page-section">
  <view class="page-section-title l-r-padding">
    <text>Horizontal Scroll</text>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      class="scroll-view_H"
      scrollX="{{true}}"
      scrollIntoView="{{toView}}"
      scrollWithAnimation="{{true}}"
      bindscroll="scroll"
      bindscrolltoupper="upper"
      bindscrolltolower="lower"
    >
      <view class="box">
        <view id="demo4" class="scroll-view-item_H demo-text-1">A</view>
        <view id="demo5" class="scroll-view-item_H demo-text-2">B</view>
        <view id="demo6" class="scroll-view-item_H demo-text-3">C</view>
      </view>
    </scroll-view>
  </view>
</view>
