nested-scroll-view

Nested scroll view component, supports nested scrolling and sticky header

Example

Code
<view class="page-body">
  <nested-scroll-view style="height: 100vh; width: 100%;" scroll-y="true" scroll-top="{{scrollTop}}" scroll-into-view="{{scrollIntoView}}" upper-threshold="50" lower-threshold="50" show-scrollbar="true" scroll-with-animation="true" bindscroll="onScroll" bindscrollstart="onScrollStart" bindscrollend="onScrollEnd" bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower">
    <nested-scroll-header>
      <sticky-header offset-top="0">
        <view class="header">Sticky Header</view>
      </sticky-header>
    </nested-scroll-header>
    <nested-scroll-header>
      <view class="header">Unsticky Header</view>
    </nested-scroll-header>
    <nested-scroll-body>
      <nested-scroll-view scroll-y="true" style="height: calc(100vh - 100px); width: 100%;">
        <!-- Your content here -->
        <view class="nested-scroll-item" id="nested-item-1">1</view>
        <view class="nested-scroll-item" id="nested-item-2">2</view>
      </nested-scroll-view>
    </nested-scroll-body>
  </nested-scroll-view>
  <button bindtap="onScrollToTop" style="position: fixed; bottom: 20px; left: 20px;">Scroll to Top</button>
  <button bindtap="onScrollToView" style="position: fixed; bottom: 20px; right: 20px;">Scroll to View</button>
</view>

Example

Code
Page({
  data: {
    scrollTop: 0,
    scrollIntoView: "",
    upperThreshold: 50,
    lowerThreshold: 50,
    enhanced: true,
    showScrollbar: true,
    scrollWithAnimation: true,
  },
  onScroll(e) {
    console.log("Scroll event:", e.detail);
  },
  onScrollStart(e) {
    console.log("Scroll start event:", e.detail);
  },
  onScrollEnd(e) {
    console.log("Scroll end event:", e.detail);
  },
  onScrollToUpper(e) {
    console.log("Scrolled to upper threshold:", e.detail);
  },
  onScrollToLower(e) {
    console.log("Scrolled to lower threshold:", e.detail);
  },
  onScrollToView(e) {
    this.setData({
      scrollIntoView: "nested-item-1", // Change to the ID of the element you want to scroll to
    });
  },
  onScrollToTop() {
    this.setData({
      scrollTop: 0,
    });
  },
});

Props

Events