nested-scroll

介绍

协调 BetterScroll 双层嵌套的滚动行为。

目前插件只解决双层嵌套问题,比如竖向套竖向横向套横向

安装

npm install @better-scroll/nested-scroll@next --save

// or

yarn add @better-scroll/nested-scroll@next

使用

你需要首先引入 nested-scroll 插件,并通过全局方法 BScroll.use() 使用

  import BScroll from '@better-scroll/core'
  import NestedScroll from '@better-scroll/nested-scroll'

  BScroll.use(NestedScroll)

上面步骤完成后,BScroll 的 options 中配置 nestedScroll

  // parent bs
  new BScroll('.outerWrapper', {
    nestedScroll: true
  })
  // child bs
  new BScroll('.innerWrapper', {
    nestedScroll: true
  })

示例

  • 竖向双层嵌套

    • 😀 😁 😂 🤣 😃 🙃
    • 👆🏻 outer scroll 👇🏻
    • 🙂 🤔 😄 🤨 😐 🙃
    • 👆🏻 outer scroll 👇🏻
    • 😔 😕 🙃 🤑 😲 ☹️
    • 🙂 🤔 😄 🤨 😐 🙃
    • 👆🏻 outer scroll 👇🏻
    • 😔 😕 🙃 🤑 😲 ☹️
    • The Mountain top of Inner
    • 😀 😁 😂 🤣 😃 🙃
    • 👆🏻 inner scroll 👇🏻
    • 🙂 🤔 😄 🤨 😐 🙃
    • 👆🏻 inner scroll 👇🏻
    • 😔 😕 🙃 🤑 😲 ☹️
    • 👆🏻 inner scroll 👇🏻
    • 🐣 🐣 🐣 🐣 🐣 🐣
    • 👆🏻 inner scroll 👇🏻
    • 🐥 🐥 🐥 🐥 🐥 🐥
    • 👆🏻 inner scroll 👇🏻
    • 🤓 🤓 🤓 🤓 🤓 🤓
    • 👆🏻 inner scroll 👇🏻
    • 🦔 🦔 🦔 🦔 🦔 🦔
    • 👆🏻 inner scroll 👇🏻
    • 🙈 🙈 🙈 🙈 🙈 🙈
    • 👆🏻 inner scroll 👇🏻
    • 🚖 🚖 🚖 🚖 🚖 🚖
    • 👆🏻 inner scroll 👇🏻
    • ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻
    • The Mountain foot of Inner
    • 😀 😁 😂 🤣 😃 🙃
    • 👆🏻 outer scroll 👇🏻
    • 🙂 🤔 😄 🤨 😐 🙃
    • 👆🏻 outer scroll 👇🏻
    • 😔 😕 🙃 🤑 😲 ☹️
    • 🙂 🤔 😄 🤨 😐 🙃
    • 👆🏻 outer scroll 👇🏻
    • 😔 😕 🙃 🤑 😲 ☹️
  • 横向双层嵌套

    • 👈🏻 outer 👉🏻
    • 🙂 🤔 😄 🤨 😐 🙃
      • 👈🏻 inner 👉🏻
      • 🙂 🤔 😄 🤨 😐 🙃
      • 👈🏻 inner 👉🏻
      • 😔 😕 🙃 🤑 😲 ☹️
      • 👈🏻 inner 👉🏻
      • 🐣 🐣 🐣 🐣 🐣 🐣
      • 👈🏻 inner 👉🏻
      • 🐥 🐥 🐥 🐥 🐥 🐥
    • 👈🏻 outer 👉🏻
    • 🙂 🤔 😄 🤨 😐 🙃