Startsida Utforska Hjälp
Registrera dig Logga in
wicresoft
/
doc_project
2
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Träd: bf1fb50bbd
Grenar Taggar
doc_project
/
better-scroll-docs
/
en-US
/
plugins
/
nested-scroll.html

nested-scroll.html 123 KB
Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>nested-scroll | BetterScroll 2.0</title>
    7. 

  7.     <meta name="generator" content="VuePress 1.9.10">
    8. 

  8.     <link rel="shortcut icon" href="/docs/assets/bs.ico" type="images/x-icon">
    9. 

  9.     <script src="https://www.googletagmanager.com/gtag/js?id=G-7E85TW7P27"></script>
    10. 

  10.     <script type="text/javascript">
    11. 

  11.       window.dataLayer = window.dataLayer || [];
    12. 

  12.       function gtag(){dataLayer.push(arguments);}
    13. 

  13.       gtag('js', new Date());
    14. 

  14.       gtag('config', 'G-7E85TW7P27');
    15. 

  15.     </script>
    16. 

  16.     <meta name="description" content="Make Scroll Perfect">
    17. 

  17.     
    18. 

  18.     <link rel="preload" href="/docs/assets/css/0.styles.0cd93813.css" as="style"><link rel="preload" href="/docs/assets/js/app.c71b64d3.js" as="script"><link rel="preload" href="/docs/assets/js/5.d6412664.js" as="script"><link rel="preload" href="/docs/assets/js/4.4855b9ef.js" as="script"><link rel="preload" href="/docs/assets/js/3.481632b4.js" as="script"><link rel="preload" href="/docs/assets/js/89.1b58abde.js" as="script"><link rel="preload" href="/docs/assets/js/7.518ccda7.js" as="script"><link rel="preload" href="/docs/assets/js/56.cd04bae9.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.8644db92.js"><link rel="prefetch" href="/docs/assets/js/10.6f8c38eb.js"><link rel="prefetch" href="/docs/assets/js/100.ee08226e.js"><link rel="prefetch" href="/docs/assets/js/101.fd2f3d9f.js"><link rel="prefetch" href="/docs/assets/js/102.79d86e3d.js"><link rel="prefetch" href="/docs/assets/js/103.7a3ae3b5.js"><link rel="prefetch" href="/docs/assets/js/104.7be4589d.js"><link rel="prefetch" href="/docs/assets/js/105.75386d15.js"><link rel="prefetch" href="/docs/assets/js/106.a4a18e8d.js"><link rel="prefetch" href="/docs/assets/js/107.561ec2e2.js"><link rel="prefetch" href="/docs/assets/js/108.1c61689f.js"><link rel="prefetch" href="/docs/assets/js/109.da71a73e.js"><link rel="prefetch" href="/docs/assets/js/110.5e0fa2d1.js"><link rel="prefetch" href="/docs/assets/js/111.1e326dd1.js"><link rel="prefetch" href="/docs/assets/js/112.590ba317.js"><link rel="prefetch" href="/docs/assets/js/113.cf201ace.js"><link rel="prefetch" href="/docs/assets/js/114.6d895ce2.js"><link rel="prefetch" href="/docs/assets/js/115.572aee19.js"><link rel="prefetch" href="/docs/assets/js/116.754722a0.js"><link rel="prefetch" href="/docs/assets/js/117.15e4dab3.js"><link rel="prefetch" href="/docs/assets/js/118.721d68f8.js"><link rel="prefetch" href="/docs/assets/js/119.c5c28d96.js"><link rel="prefetch" href="/docs/assets/js/120.12cd2e0e.js"><link rel="prefetch" href="/docs/assets/js/121.e41f8100.js"><link rel="prefetch" href="/docs/assets/js/122.9ebe2f53.js"><link rel="prefetch" href="/docs/assets/js/123.f90c91f9.js"><link rel="prefetch" href="/docs/assets/js/13.b0c40cd7.js"><link rel="prefetch" href="/docs/assets/js/14.28bec126.js"><link rel="prefetch" href="/docs/assets/js/15.87b22af4.js"><link rel="prefetch" href="/docs/assets/js/16.c10e14e7.js"><link rel="prefetch" href="/docs/assets/js/17.5c921c77.js"><link rel="prefetch" href="/docs/assets/js/18.dc23b7e3.js"><link rel="prefetch" href="/docs/assets/js/19.a4034f95.js"><link rel="prefetch" href="/docs/assets/js/2.03f0f2c8.js"><link rel="prefetch" href="/docs/assets/js/20.8633fd45.js"><link rel="prefetch" href="/docs/assets/js/21.1fbf8d7e.js"><link rel="prefetch" href="/docs/assets/js/22.2888cfc5.js"><link rel="prefetch" href="/docs/assets/js/23.f951d302.js"><link rel="prefetch" href="/docs/assets/js/24.12842718.js"><link rel="prefetch" href="/docs/assets/js/25.5a5a3137.js"><link rel="prefetch" href="/docs/assets/js/26.88e81f0b.js"><link rel="prefetch" href="/docs/assets/js/27.152b8fda.js"><link rel="prefetch" href="/docs/assets/js/28.22550ea8.js"><link rel="prefetch" href="/docs/assets/js/29.f43fa807.js"><link rel="prefetch" href="/docs/assets/js/30.4ed38f67.js"><link rel="prefetch" href="/docs/assets/js/31.af4018f6.js"><link rel="prefetch" href="/docs/assets/js/32.930ee0b7.js"><link rel="prefetch" href="/docs/assets/js/33.c6a68c75.js"><link rel="prefetch" href="/docs/assets/js/34.6d10da1e.js"><link rel="prefetch" href="/docs/assets/js/35.11ba7b51.js"><link rel="prefetch" href="/docs/assets/js/36.8a54712b.js"><link rel="prefetch" href="/docs/assets/js/37.b26eb85d.js"><link rel="prefetch" href="/docs/assets/js/38.d6569a11.js"><link rel="prefetch" href="/docs/assets/js/39.1d22cfba.js"><link rel="prefetch" href="/docs/assets/js/40.577a94d7.js"><link rel="prefetch" href="/docs/assets/js/41.155e01e0.js"><link rel="prefetch" href="/docs/assets/js/42.3c26eaba.js"><link rel="prefetch" href="/docs/assets/js/43.d90991e2.js"><link rel="prefetch" href="/docs/assets/js/44.5437344c.js"><link rel="prefetch" href="/docs/assets/js/45.0d2eca0a.js"><link rel="prefetch" href="/docs/assets/js/46.11455b40.js"><link rel="prefetch" href="/docs/assets/js/47.1ee1a8f0.js"><link rel="prefetch" href="/docs/assets/js/48.c82450ab.js"><link rel="prefetch" href="/docs/assets/js/49.8016ee5f.js"><link rel="prefetch" href="/docs/assets/js/50.ab73e091.js"><link rel="prefetch" href="/docs/assets/js/51.bce6eb99.js"><link rel="prefetch" href="/docs/assets/js/52.c9b1992f.js"><link rel="prefetch" href="/docs/assets/js/53.7057f0f5.js"><link rel="prefetch" href="/docs/assets/js/54.cbb0a6b5.js"><link rel="prefetch" href="/docs/assets/js/55.89176a68.js"><link rel="prefetch" href="/docs/assets/js/57.c7a42e07.js"><link rel="prefetch" href="/docs/assets/js/58.09d6cb1b.js"><link rel="prefetch" href="/docs/assets/js/59.8445a09f.js"><link rel="prefetch" href="/docs/assets/js/6.5737c458.js"><link rel="prefetch" href="/docs/assets/js/60.86b1f417.js"><link rel="prefetch" href="/docs/assets/js/61.fa371ad1.js"><link rel="prefetch" href="/docs/assets/js/62.dbc75ddc.js"><link rel="prefetch" href="/docs/assets/js/63.a4465c93.js"><link rel="prefetch" href="/docs/assets/js/64.a39c3193.js"><link rel="prefetch" href="/docs/assets/js/65.a7275f82.js"><link rel="prefetch" href="/docs/assets/js/66.afd0af7d.js"><link rel="prefetch" href="/docs/assets/js/67.8009e00e.js"><link rel="prefetch" href="/docs/assets/js/68.de3c51dd.js"><link rel="prefetch" href="/docs/assets/js/69.41a50235.js"><link rel="prefetch" href="/docs/assets/js/70.938e9532.js"><link rel="prefetch" href="/docs/assets/js/71.af7fca59.js"><link rel="prefetch" href="/docs/assets/js/72.25df569a.js"><link rel="prefetch" href="/docs/assets/js/73.f16b7dc3.js"><link rel="prefetch" href="/docs/assets/js/74.d2184ed7.js"><link rel="prefetch" href="/docs/assets/js/75.9497b6fa.js"><link rel="prefetch" href="/docs/assets/js/76.2081d35e.js"><link rel="prefetch" href="/docs/assets/js/77.e5a8b470.js"><link rel="prefetch" href="/docs/assets/js/78.6d3ef23b.js"><link rel="prefetch" href="/docs/assets/js/79.025583e1.js"><link rel="prefetch" href="/docs/assets/js/8.8547d4ad.js"><link rel="prefetch" href="/docs/assets/js/80.e7e3ef35.js"><link rel="prefetch" href="/docs/assets/js/81.569d569f.js"><link rel="prefetch" href="/docs/assets/js/82.ac3ed0f7.js"><link rel="prefetch" href="/docs/assets/js/83.3393dfc3.js"><link rel="prefetch" href="/docs/assets/js/84.e5352ac1.js"><link rel="prefetch" href="/docs/assets/js/85.c7cdb129.js"><link rel="prefetch" href="/docs/assets/js/86.0aa0af94.js"><link rel="prefetch" href="/docs/assets/js/87.0db12b1e.js"><link rel="prefetch" href="/docs/assets/js/88.e8651cfa.js"><link rel="prefetch" href="/docs/assets/js/9.0a882dfc.js"><link rel="prefetch" href="/docs/assets/js/90.d65d2d13.js"><link rel="prefetch" href="/docs/assets/js/91.32b2ad41.js"><link rel="prefetch" href="/docs/assets/js/92.795675a1.js"><link rel="prefetch" href="/docs/assets/js/93.818e5569.js"><link rel="prefetch" href="/docs/assets/js/94.79c2b16e.js"><link rel="prefetch" href="/docs/assets/js/95.4810ee5e.js"><link rel="prefetch" href="/docs/assets/js/96.6e382fd5.js"><link rel="prefetch" href="/docs/assets/js/97.e270d7b5.js"><link rel="prefetch" href="/docs/assets/js/98.728ef6c2.js"><link rel="prefetch" href="/docs/assets/js/99.c75096e0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.2091e099.js">
    19. 

  19.     <link rel="stylesheet" href="/docs/assets/css/0.styles.0cd93813.css">
    20. 

  20.   </head>
    21. 

  21.   <body>
    22. 

  22.     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/en-US/" class="home-link router-link-active"><img src="https://dpubstatic.udache.com/static/dpubimg/t_L6vAgQ-E/logo.svg" alt="BetterScroll 2.0" class="logo"> <span class="site-name can-hide">BetterScroll 2.0</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/en-US/guide/" class="nav-link">
    23. 

  23.   Guide
    24. 

  24. </a></div><div class="nav-item"><a href="/docs/en-US/plugins/" class="nav-link router-link-active">
    25. 

  25.   Plugin
    26. 

  26. </a></div><div class="nav-item"><a href="/docs/en-US/FAQ/" class="nav-link">
    27. 

  27.   FAQ
    28. 

  28. </a></div><div class="nav-item"><a href="https://github.com/ustbhuangyi/better-scroll/issues" target="_blank" rel="noopener noreferrer" class="nav-link external">
    29. 

  29.   Discuss
    30. 

  30.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs/en-US/plugins/nested-scroll.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
    31. 

  31.   English
    32. 

  32. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/nested-scroll.html" class="nav-link">
    33. 

  33.   简体中文
    34. 

  34. </a></li></ul></div></div> <a href="https://github.com/ustbhuangyi/better-scroll" target="_blank" rel="noopener noreferrer" class="repo-link">
    35. 

  35.     GitHub
    36. 

  36.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/en-US/guide/" class="nav-link">
    37. 

  37.   Guide
    38. 

  38. </a></div><div class="nav-item"><a href="/docs/en-US/plugins/" class="nav-link router-link-active">
    39. 

  39.   Plugin
    40. 

  40. </a></div><div class="nav-item"><a href="/docs/en-US/FAQ/" class="nav-link">
    41. 

  41.   FAQ
    42. 

  42. </a></div><div class="nav-item"><a href="https://github.com/ustbhuangyi/better-scroll/issues" target="_blank" rel="noopener noreferrer" class="nav-link external">
    43. 

  43.   Discuss
    44. 

  44.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs/en-US/plugins/nested-scroll.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
    45. 

  45.   English
    46. 

  46. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/nested-scroll.html" class="nav-link">
    47. 

  47.   简体中文
    48. 

  48. </a></li></ul></div></div> <a href="https://github.com/ustbhuangyi/better-scroll" target="_blank" rel="noopener noreferrer" class="repo-link">
    49. 

  49.     GitHub
    50. 

  50.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Plugins Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/plugins/" aria-current="page" class="sidebar-link">plugins</a></li><li><a href="/docs/en-US/plugins/how-to-write.html" class="sidebar-link">How to write plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Plugins</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/plugins/mouse-wheel.html" class="sidebar-link">mouse-wheel</a></li><li><a href="/docs/en-US/plugins/observe-dom.html" class="sidebar-link">observe-dom</a></li><li><a href="/docs/en-US/plugins/observe-image.html" class="sidebar-link">observe-image</a></li><li><a href="/docs/en-US/plugins/pulldown.html" class="sidebar-link">pulldown</a></li><li><a href="/docs/en-US/plugins/pullup.html" class="sidebar-link">pullup</a></li><li><a href="/docs/en-US/plugins/scroll-bar.html" class="sidebar-link">scrollbar</a></li><li><a href="/docs/en-US/plugins/indicators.html" class="sidebar-link">indicators</a></li><li><a href="/docs/en-US/plugins/slide.html" class="sidebar-link">slide</a></li><li><a href="/docs/en-US/plugins/wheel.html" class="sidebar-link">wheel</a></li><li><a href="/docs/en-US/plugins/zoom.html" class="sidebar-link">zoom</a></li><li><a href="/docs/en-US/plugins/nested-scroll.html" aria-current="page" class="active sidebar-link">nested-scroll</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/nested-scroll.html#introduction" class="sidebar-link">Introduction</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/nested-scroll.html#install" class="sidebar-link">Install</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/nested-scroll.html#usage" class="sidebar-link">Usage</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/nested-scroll.html#demo" class="sidebar-link">Demo</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/nested-scroll.html#instance-methods" class="sidebar-link">Instance Methods</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/nested-scroll.html#static-methods" class="sidebar-link">Static Methods</a></li></ul></li><li><a href="/docs/en-US/plugins/infinity.html" class="sidebar-link">infinity</a></li><li><a href="/docs/en-US/plugins/movable.html" class="sidebar-link">movable</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="nested-scroll"><a href="#nested-scroll" class="header-anchor">#</a> nested-scroll</h1> <h2 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h2> <p>Coordinates nested BetterScroll scrolling behavior.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p><strong>v2.1.0</strong> supports BetterScroll with <strong>Multi Nesting</strong>, with more powerful functions and better performance. Only <strong>Double Nesting</strong> is supported in old version, please upgrade to <strong>v2.1.0</strong> as soon as possible.</p></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><strong>v2.1.0</strong> Perfectly solves the problem that the click event of multi-level nested BetterScroll is dispatched multiple times.</p></div> <h2 id="install"><a href="#install" class="header-anchor">#</a> Install</h2> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> @better-scroll/nested-scroll <span class="token parameter variable">--save</span>
    51. 

  51. 

  52. // or
    53. 

  53. 

  54. <span class="token function">yarn</span> <span class="token function">add</span> @better-scroll/nested-scroll
    55. 

  55. </code></pre></div><h2 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h2> <p>import the <code>nested-scroll</code> plugin and use it with the static method <code>BScroll.use()</code></p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    56. 

  56.   <span class="token keyword">import</span> NestedScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/nested-scroll'</span>
    57. 

  57. 

  58.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>NestedScroll<span class="token punctuation">)</span>
    59. 

  59. </code></pre></div><p>After the above steps are completed, <code>nestedScroll</code> is configured in BScroll's <code>options</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// &lt; v2.1.0</span>
    60. 

  60.   <span class="token comment">// parent bs</span>
    61. 

  61.   <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.outerWrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    62. 

  62.     <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token boolean">true</span>
    63. 

  63.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    64. 

  64.   <span class="token comment">// child bs</span>
    65. 

  65.   <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.innerWrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    66. 

  66.     <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token boolean">true</span>
    67. 

  67.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    68. 

  68. 

  69.   <span class="token comment">// &gt;= v2.1.0</span>
    70. 

  70.   <span class="token comment">// parent bs</span>
    71. 

  71.   <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.outerWrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    72. 

  72.     <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    73. 

  73.       <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'dummy-divide'</span> <span class="token comment">// string or number</span>
    74. 

  74.     <span class="token punctuation">}</span>
    75. 

  75.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    76. 

  76.   <span class="token comment">// child bs</span>
    77. 

  77.   <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.innerWrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    78. 

  78.     <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    79. 

  79.       <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'dummy-divide'</span>
    80. 

  80.     <span class="token punctuation">}</span>
    81. 

  81.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    82. 

  82. </code></pre></div><p>BetterScroll instances (bs) with the same <code>groupId</code> <strong>share the same NestedScroll instance</strong>(<code>ns</code>), <code>ns</code> will coordinate the scrolling behavior of each bs, once a bs is destroyed, <code>ns</code> will lose control of it, for example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// parent bs</span>
    83. 

  83. <span class="token keyword">const</span> bs1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.outerWrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    84. 

  84.   <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    85. 

  85.     <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'shared'</span> <span class="token comment">// string or number</span>
    86. 

  86.   <span class="token punctuation">}</span>
    87. 

  87. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    88. 

  88. <span class="token comment">// child bs</span>
    89. 

  89. <span class="token keyword">const</span> bs2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.innerWrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    90. 

  90.   <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    91. 

  91.     <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'shared'</span>
    92. 

  92.   <span class="token punctuation">}</span>
    93. 

  93. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    94. 

  94. 

  95. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bs1<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span>nestedScroll <span class="token operator">===</span> bs2<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span>nestedScroll<span class="token punctuation">)</span> <span class="token comment">// true</span>
    96. 

  96. 

  97. <span class="token comment">// nestedScroll no longer constrains bs2</span>
    98. 

  98. <span class="token comment">// nestedScroll no longer coordinates the scrolling behavior of bs1 and bs2</span>
    99. 

  99. bs2<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    100. 

  100. </code></pre></div><h2 id="demo"><a href="#demo" class="header-anchor">#</a> Demo</h2> <ul><li><p><strong>Nested vertical scroll <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#000"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg></i> <div class="v-popover"><div class="trigger" style="display:inline-block;"><i class="demo-nav-btn icon-qrcode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg></i> </div> <div id="popover_tl7xjnpahq" aria-hidden="true" tabindex="0" class="tooltip popover vue-popover-theme" style="visibility:hidden;"><div class="wrapper"><div class="tooltip-inner popover-inner" style="position:relative;"><div><div></div></div> <div tabindex="-1" class="resize-observer" data-v-8859cc6c></div></div> <div class="tooltip-arrow popover-arrow"></div></div></div></div> <i class="demo-nav-btn icon-preview"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></i></div> <div class="demo-code" style="display:;"><div class="demo-code-nav"><button class="demo-code-btn active">Template</button><button class="demo-code-btn">Script</button><button class="demo-code-btn">Style</button></div> <div class="demo-code-content"><div class="demo-code-item" style="display:;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    101. 

  101.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    102. 

  102.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outerScroll<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    103. 

  103.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    104. 

  104.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    105. 

  105.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOuterClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in outerOpenData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    106. 

  106.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    107. 

  107.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>innerScroll<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    108. 

  108.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    109. 

  109.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in innerData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleInnerClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    110. 

  110.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    111. 

  111.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    112. 

  112.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    113. 

  113.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOuterClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in outerCloseData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    114. 

  114.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    115. 

  115.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    116. 

  116. 

  117.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    118. 

  118.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    119. 

  119. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/ecmascript-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    120. 

  120. <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    121. 

  121. <span class="token keyword">import</span> NestedScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/nested-scroll'</span>
    122. 

  122. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>NestedScroll<span class="token punctuation">)</span>
    123. 

  123. 

  124. <span class="token keyword">const</span> outerOpenData <span class="token operator">=</span> <span class="token punctuation">[</span>
    125. 

  125.   <span class="token string">'----Outer Start----'</span><span class="token punctuation">,</span>
    126. 

  126.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    127. 

  127.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    128. 

  128.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span>
    129. 

  129. <span class="token punctuation">]</span>
    130. 

  130. 

  131. <span class="token keyword">const</span> outerCloseData <span class="token operator">=</span> <span class="token punctuation">[</span>
    132. 

  132.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    133. 

  133.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    134. 

  134.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    135. 

  135.   <span class="token string">'😔 😕 🙃 🤑 😲 😲 '</span><span class="token punctuation">,</span>
    136. 

  136.   <span class="token string">'🙂 🤔 😄 🤨  😐 🙃 '</span><span class="token punctuation">,</span>
    137. 

  137.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    138. 

  138.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    139. 

  139.   <span class="token string">'😔 😕 🙃 🤑 😲 😲 '</span><span class="token punctuation">,</span>
    140. 

  140.   <span class="token string">'🙂 🤔 😄 🤨  😐 🙃 '</span><span class="token punctuation">,</span>
    141. 

  141.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    142. 

  142.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    143. 

  143.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    144. 

  144.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    145. 

  145.   <span class="token string">'----Outer End----'</span><span class="token punctuation">,</span>
    146. 

  146. <span class="token punctuation">]</span>
    147. 

  147. 

  148. <span class="token keyword">const</span> innerData <span class="token operator">=</span> <span class="token punctuation">[</span>
    149. 

  149.   <span class="token string">'------Inner Start-----'</span><span class="token punctuation">,</span>
    150. 

  150.   <span class="token string">'😀 😁 😂 🤣 😃 🙃 '</span><span class="token punctuation">,</span>
    151. 

  151.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    152. 

  152.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    153. 

  153.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    154. 

  154.   <span class="token string">'😔 😕 🙃 🤑 😲 😐 🙃 '</span><span class="token punctuation">,</span>
    155. 

  155.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    156. 

  156.   <span class="token string">'🐣 🐣 🐣 🐣 🐣 🐣 '</span><span class="token punctuation">,</span>
    157. 

  157.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    158. 

  158.   <span class="token string">'🐥 🐥 🐥 🐥 🐥 🐥 '</span><span class="token punctuation">,</span>
    159. 

  159.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    160. 

  160.   <span class="token string">'🤓 🤓 🤓 🤓 🤓 🤓 '</span><span class="token punctuation">,</span>
    161. 

  161.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    162. 

  162.   <span class="token string">'🦔 🦔 🦔 🦔 🦔 🦔 '</span><span class="token punctuation">,</span>
    163. 

  163.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    164. 

  164.   <span class="token string">'🙈 🙈 🙈 🙈 🙈 🙈 '</span><span class="token punctuation">,</span>
    165. 

  165.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    166. 

  166.   <span class="token string">'🚖 🚖 🚖 🚖 🚖 🚖 '</span><span class="token punctuation">,</span>
    167. 

  167.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    168. 

  168.   <span class="token string">'✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '</span><span class="token punctuation">,</span>
    169. 

  169.   <span class="token string">'-----Inner End-----'</span>
    170. 

  170. <span class="token punctuation">]</span>
    171. 

  171. 

  172. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    173. 

  173.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    174. 

  174.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    175. 

  175.       outerOpenData<span class="token punctuation">,</span>
    176. 

  176.       outerCloseData<span class="token punctuation">,</span>
    177. 

  177.       innerData<span class="token punctuation">,</span>
    178. 

  178.     <span class="token punctuation">}</span>
    179. 

  179.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    180. 

  180.   <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    181. 

  181.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initBScroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    182. 

  182.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    183. 

  183.   <span class="token function">beforeDestroy</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    184. 

  184.     <span class="token keyword">this</span><span class="token punctuation">.</span>outerScroll<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    185. 

  185.     <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    186. 

  186.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    187. 

  187.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    188. 

  188.     <span class="token function">handleOuterClick</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    189. 

  189.       window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'clicked outer item'</span><span class="token punctuation">)</span>
    190. 

  190.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    191. 

  191.     <span class="token function">handleInnerClick</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    192. 

  192.       window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'clicked inner item'</span><span class="token punctuation">)</span>
    193. 

  193.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    194. 

  194.     <span class="token function">initBScroll</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    195. 

  195.       <span class="token comment">// outer</span>
    196. 

  196.       <span class="token keyword">this</span><span class="token punctuation">.</span>outerScroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>outerScroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    197. 

  197.         <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    198. 

  198.           <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'vertical-nested-scroll'</span> <span class="token comment">// groupId is a string or number</span>
    199. 

  199.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    200. 

  200.         <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    201. 

  201.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    202. 

  202. 

  203.       <span class="token comment">// inner</span>
    204. 

  204.       <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>innerScroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    205. 

  205.         <span class="token comment">// please keep the same groupId as above</span>
    206. 

  206.         <span class="token comment">// outerScroll and innerScroll will be controlled by the same nestedScroll instance</span>
    207. 

  207.         <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    208. 

  208.           <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'vertical-nested-scroll'</span>
    209. 

  209.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    210. 

  210.         <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    211. 

  211.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    212. 

  212.     <span class="token punctuation">}</span>
    213. 

  213.   <span class="token punctuation">}</span>
    214. 

  214. <span class="token punctuation">}</span>
    215. 

  215. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-styl extra-class"><pre class="language-styl"><code><span class="token selector">&lt;style lang=&quot;stylus&quot; rel=&quot;stylesheet/stylus&quot; scoped&gt;
    216. 

  216. .container</span>
    217. 

  217.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    218. 

  218. <span class="token selector">.outer-wrapper
    219. 

  219. .inner-wrapper</span>
    220. 

  220.   <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span> solid <span class="token hexcode">#62B791</span></span>
    221. 

  221.   <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span></span>
    222. 

  222.   <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    223. 

  223.   <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    224. 

  224.   <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    225. 

  225. <span class="token selector">.outer-wrapper</span>
    226. 

  226.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    227. 

  227.   <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">.1</span><span class="token punctuation">)</span></span></span>
    228. 

  228. <span class="token selector">.inner-wrapper</span>
    229. 

  229.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span><span class="token unit">px</span></span>
    230. 

  230.   <span class="token property-declaration"><span class="token property">background-color</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">98</span><span class="token punctuation">,</span><span class="token number">183</span><span class="token punctuation">,</span><span class="token number">145</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span></span></span>
    231. 

  231. <span class="token selector">.inner-list-item</span>
    232. 

  232.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span></span>
    233. 

  233.   <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span></span>
    234. 

  234.   <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    235. 

  235.   <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    236. 

  236. 

  237. <span class="token selector">.outer-list-item</span>
    238. 

  238.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span></span>
    239. 

  239.   <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span></span>
    240. 

  240.   <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    241. 

  241.   <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    242. 

  242. &lt;/style&gt;</code></pre></div></div> <i class="demo-code-content-copy"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#ccc"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg></i> <!----></div></div> <div class="demo-main"><div class="demo-component-wrap"></div></div></div></li> <li><p><strong>Nested triple vertical scroll <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#000"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg></i> <div class="v-popover"><div class="trigger" style="display:inline-block;"><i class="demo-nav-btn icon-qrcode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg></i> </div> <div id="popover_bju826p4ng" aria-hidden="true" tabindex="0" class="tooltip popover vue-popover-theme" style="visibility:hidden;"><div class="wrapper"><div class="tooltip-inner popover-inner" style="position:relative;"><div><div></div></div> <div tabindex="-1" class="resize-observer" data-v-8859cc6c></div></div> <div class="tooltip-arrow popover-arrow"></div></div></div></div> <i class="demo-nav-btn icon-preview"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></i></div> <div class="demo-code" style="display:;"><div class="demo-code-nav"><button class="demo-code-btn active">Template</button><button class="demo-code-btn">Script</button><button class="demo-code-btn">Style</button></div> <div class="demo-code-content"><div class="demo-code-item" style="display:;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    243. 

  243.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    244. 

  244.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outerScroll<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    245. 

  245.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    246. 

  246.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    247. 

  247.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOuterClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in outerOpenData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    248. 

  248.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    249. 

  249.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middleScroll<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    250. 

  250.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    251. 

  251.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    252. 

  252.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleMiddleClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in middleOpenData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    253. 

  253.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    254. 

  254.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>innerScroll<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    255. 

  255.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    256. 

  256.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in innerData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleInnerClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    257. 

  257.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    258. 

  258.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    259. 

  259.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    260. 

  260.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleMiddleClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in middleCloseData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index + 100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    261. 

  261.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    262. 

  262.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    263. 

  263.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    264. 

  264.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    265. 

  265.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOuterClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in outerCloseData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index + 100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    266. 

  266.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    267. 

  267.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    268. 

  268. 

  269.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    270. 

  270.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    271. 

  271. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/ecmascript-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    272. 

  272. <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    273. 

  273. <span class="token keyword">import</span> NestedScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/nested-scroll'</span>
    274. 

  274. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>NestedScroll<span class="token punctuation">)</span>
    275. 

  275. 

  276. <span class="token keyword">const</span> outerOpenData <span class="token operator">=</span> <span class="token punctuation">[</span>
    277. 

  277.   <span class="token string">'----Outer Start----'</span><span class="token punctuation">,</span>
    278. 

  278.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    279. 

  279.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    280. 

  280.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span>
    281. 

  281. <span class="token punctuation">]</span>
    282. 

  282. 

  283. <span class="token keyword">const</span> outerCloseData <span class="token operator">=</span> <span class="token punctuation">[</span>
    284. 

  284.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    285. 

  285.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    286. 

  286.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    287. 

  287.   <span class="token string">'😔 😕 🙃 🤑 😲 😲 '</span><span class="token punctuation">,</span>
    288. 

  288.   <span class="token string">'🙂 🤔 😄 🤨  😐 🙃 '</span><span class="token punctuation">,</span>
    289. 

  289.   <span class="token string">'👆🏻 outer scroll 👇🏻 '</span><span class="token punctuation">,</span>
    290. 

  290.   <span class="token string">'----Outer End----'</span><span class="token punctuation">,</span>
    291. 

  291. <span class="token punctuation">]</span>
    292. 

  292. 

  293. <span class="token keyword">const</span> middleOpenData <span class="token operator">=</span> <span class="token punctuation">[</span>
    294. 

  294.   <span class="token string">'----Middle Start----'</span><span class="token punctuation">,</span>
    295. 

  295.   <span class="token string">'👆🏻 middle scroll 👇🏻 '</span><span class="token punctuation">,</span>
    296. 

  296.   <span class="token string">'🐣 🐣 🐣 🐣 🐣 🐣 '</span><span class="token punctuation">,</span>
    297. 

  297. <span class="token punctuation">]</span>
    298. 

  298. 

  299. <span class="token keyword">const</span> middleCloseData <span class="token operator">=</span> <span class="token punctuation">[</span>
    300. 

  300.   <span class="token string">'👆🏻 middle scroll 👇🏻 '</span><span class="token punctuation">,</span>
    301. 

  301.   <span class="token string">'🤓 🤓 🤓 🤓 🤓 🤓 '</span><span class="token punctuation">,</span>
    302. 

  302.   <span class="token string">'👆🏻 middle scroll 👇🏻 '</span><span class="token punctuation">,</span>
    303. 

  303.   <span class="token string">'🦔 🦔 🦔 🦔 🦔 🦔 '</span><span class="token punctuation">,</span>
    304. 

  304.   <span class="token string">'👆🏻 middle scroll 👇🏻 '</span><span class="token punctuation">,</span>
    305. 

  305.   <span class="token string">'🙈 🙈 🙈 🙈 🙈 🙈 '</span><span class="token punctuation">,</span>
    306. 

  306.   <span class="token string">'👆🏻 middle scroll 👇🏻 '</span><span class="token punctuation">,</span>
    307. 

  307.   <span class="token string">'🚖 🚖 🚖 🚖 🚖 🚖 '</span><span class="token punctuation">,</span>
    308. 

  308.   <span class="token string">'👆🏻 middle scroll 👇🏻 '</span><span class="token punctuation">,</span>
    309. 

  309.   <span class="token string">'✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '</span><span class="token punctuation">,</span>
    310. 

  310.   <span class="token string">'----Middle End----'</span><span class="token punctuation">,</span>
    311. 

  311. <span class="token punctuation">]</span>
    312. 

  312. 

  313. <span class="token keyword">const</span> innerData <span class="token operator">=</span> <span class="token punctuation">[</span>
    314. 

  314.   <span class="token string">'------Inner Start-----'</span><span class="token punctuation">,</span>
    315. 

  315.   <span class="token string">'😀 😁 😂 🤣 😃 🙃 '</span><span class="token punctuation">,</span>
    316. 

  316.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    317. 

  317.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    318. 

  318.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    319. 

  319.   <span class="token string">'😔 😕 🙃 🤑 😲 😐 🙃 '</span><span class="token punctuation">,</span>
    320. 

  320.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    321. 

  321.   <span class="token string">'🐣 🐣 🐣 🐣 🐣 🐣 '</span><span class="token punctuation">,</span>
    322. 

  322.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    323. 

  323.   <span class="token string">'🐥 🐥 🐥 🐥 🐥 🐥 '</span><span class="token punctuation">,</span>
    324. 

  324.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    325. 

  325.   <span class="token string">'🤓 🤓 🤓 🤓 🤓 🤓 '</span><span class="token punctuation">,</span>
    326. 

  326.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    327. 

  327.   <span class="token string">'🦔 🦔 🦔 🦔 🦔 🦔 '</span><span class="token punctuation">,</span>
    328. 

  328.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    329. 

  329.   <span class="token string">'🙈 🙈 🙈 🙈 🙈 🙈 '</span><span class="token punctuation">,</span>
    330. 

  330.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    331. 

  331.   <span class="token string">'🚖 🚖 🚖 🚖 🚖 🚖 '</span><span class="token punctuation">,</span>
    332. 

  332.   <span class="token string">'👆🏻 inner scroll 👇🏻 '</span><span class="token punctuation">,</span>
    333. 

  333.   <span class="token string">'✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '</span><span class="token punctuation">,</span>
    334. 

  334.   <span class="token string">'-----Inner End-----'</span>
    335. 

  335. <span class="token punctuation">]</span>
    336. 

  336. 

  337. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    338. 

  338.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    339. 

  339.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    340. 

  340.       outerOpenData<span class="token punctuation">,</span>
    341. 

  341.       outerCloseData<span class="token punctuation">,</span>
    342. 

  342.       middleOpenData<span class="token punctuation">,</span>
    343. 

  343.       middleCloseData<span class="token punctuation">,</span>
    344. 

  344.       innerData<span class="token punctuation">,</span>
    345. 

  345.     <span class="token punctuation">}</span>
    346. 

  346.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    347. 

  347.   <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    348. 

  348.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initBScroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    349. 

  349.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    350. 

  350.   <span class="token function">beforeDestroy</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    351. 

  351.     <span class="token keyword">this</span><span class="token punctuation">.</span>outerScroll<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    352. 

  352.     <span class="token keyword">this</span><span class="token punctuation">.</span>middleScroll<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    353. 

  353.     <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    354. 

  354.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    355. 

  355.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    356. 

  356.     <span class="token function">handleOuterClick</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    357. 

  357.       window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'clicked outer item'</span><span class="token punctuation">)</span>
    358. 

  358.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    359. 

  359.     <span class="token function">handleMiddleClick</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    360. 

  360.       window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'clicked middle item'</span><span class="token punctuation">)</span>
    361. 

  361.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    362. 

  362.     <span class="token function">handleInnerClick</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    363. 

  363.       window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'clicked inner item'</span><span class="token punctuation">)</span>
    364. 

  364.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    365. 

  365.     <span class="token function">initBScroll</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    366. 

  366.       <span class="token comment">// outer</span>
    367. 

  367.       <span class="token keyword">this</span><span class="token punctuation">.</span>outerScroll <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>outerScroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>outerScroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    368. 

  368.         <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    369. 

  369.           <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'triple-nested-scroll'</span> <span class="token comment">// groupId is a string or number</span>
    370. 

  370.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    371. 

  371.         <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    372. 

  372.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    373. 

  373. 

  374.       <span class="token comment">// inner</span>
    375. 

  375.       <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>innerScroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    376. 

  376.         <span class="token comment">// please keep the same groupId as above</span>
    377. 

  377.         <span class="token comment">// all scrolls will be controlled by the same nestedScroll instance</span>
    378. 

  378.         <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    379. 

  379.           <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'triple-nested-scroll'</span>
    380. 

  380.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    381. 

  381.         <span class="token literal-property property">probeType</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span>
    382. 

  382.         <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    383. 

  383.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    384. 

  384. 

  385.       <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    386. 

  386.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'innerScroll scroll'</span><span class="token punctuation">)</span>
    387. 

  387.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    388. 

  388.       <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollEnd'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    389. 

  389.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'innerScroll scrollEnd'</span><span class="token punctuation">)</span>
    390. 

  390.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    391. 

  391. 

  392.       <span class="token comment">// middle</span>
    393. 

  393.       <span class="token keyword">this</span><span class="token punctuation">.</span>middleScroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>middleScroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    394. 

  394.         <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    395. 

  395.           <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'triple-nested-scroll'</span> <span class="token comment">// groupId is a string or number</span>
    396. 

  396.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    397. 

  397.         <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    398. 

  398.         <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    399. 

  399.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    400. 

  400. 

  401.       <span class="token keyword">this</span><span class="token punctuation">.</span>middleScroll<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    402. 

  402.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'middleScroll scroll'</span><span class="token punctuation">)</span>
    403. 

  403.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    404. 

  404.     <span class="token punctuation">}</span>
    405. 

  405.   <span class="token punctuation">}</span>
    406. 

  406. <span class="token punctuation">}</span>
    407. 

  407. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-styl extra-class"><pre class="language-styl"><code><span class="token selector">&lt;style lang=&quot;stylus&quot; rel=&quot;stylesheet/stylus&quot; scoped&gt;
    408. 

  408. .container</span>
    409. 

  409.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    410. 

  410. <span class="token selector">.outer-wrapper
    411. 

  411. .middle-wrapper
    412. 

  412. .inner-wrapper</span>
    413. 

  413.   <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span> solid <span class="token hexcode">#62B791</span></span>
    414. 

  414.   <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span></span>
    415. 

  415.   <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    416. 

  416.   <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    417. 

  417.   <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    418. 

  418. <span class="token selector">.outer-wrapper</span>
    419. 

  419.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    420. 

  420.   <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">.1</span><span class="token punctuation">)</span></span></span>
    421. 

  421. <span class="token selector">.middle-wrapper</span>
    422. 

  422.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">480</span><span class="token unit">px</span></span>
    423. 

  423.   <span class="token property-declaration"><span class="token property">background-color</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">240</span><span class="token punctuation">,</span><span class="token number">65</span><span class="token punctuation">,</span><span class="token number">85</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span>  </span></span>
    424. 

  424.   <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span> solid <span class="token hexcode">#f04155</span></span>
    425. 

  425. <span class="token selector">.inner-wrapper</span>
    426. 

  426.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span><span class="token unit">px</span></span>
    427. 

  427.   <span class="token property-declaration"><span class="token property">background-color</span> <span class="token func"><span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">98</span><span class="token punctuation">,</span><span class="token number">183</span><span class="token punctuation">,</span><span class="token number">145</span><span class="token punctuation">)</span></span></span>
    428. 

  428. <span class="token selector">.middle-list-item
    429. 

  429. .inner-list-item</span>
    430. 

  430.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span></span>
    431. 

  431.   <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span></span>
    432. 

  432.   <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    433. 

  433.   <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    434. 

  434.   <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span></span>
    435. 

  435. 

  436. <span class="token selector">.middle-list-item</span>
    437. 

  437.   <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#894e06</span></span>
    438. 

  438. 

  439. <span class="token selector">.outer-list-item</span>
    440. 

  440.   <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span></span>
    441. 

  441.   <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span></span>
    442. 

  442.   <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    443. 

  443.   <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    444. 

  444. &lt;/style&gt;</code></pre></div></div> <i class="demo-code-content-copy"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#ccc"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg></i> <!----></div></div> <div class="demo-main"><div class="demo-component-wrap"></div></div></div></li> <li><p><strong>Nested horizontal scroll <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg></i> <div class="v-popover"><div class="trigger" style="display:inline-block;"><i class="demo-nav-btn icon-qrcode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg></i> </div> <div id="popover_v5102laha6" aria-hidden="true" tabindex="0" class="tooltip popover vue-popover-theme" style="visibility:hidden;"><div class="wrapper"><div class="tooltip-inner popover-inner" style="position:relative;"><div><div></div></div> <div tabindex="-1" class="resize-observer" data-v-8859cc6c></div></div> <div class="tooltip-arrow popover-arrow"></div></div></div></div> <i class="demo-nav-btn icon-preview"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></i></div> <div class="demo-code" style="display:none;"><div class="demo-code-nav"><button class="demo-code-btn active">Template</button><button class="demo-code-btn">Script</button><button class="demo-code-btn">Style</button></div> <div class="demo-code-content"><div class="demo-code-item" style="display:;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    445. 

  445.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    446. 

  446.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outerScroll<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    447. 

  447.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    448. 

  448.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, idx) in items1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOuterClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    449. 

  449.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-item inner-list-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    450. 

  450.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
    451. 

  451.               <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>innerScroll<span class="token punctuation">&quot;</span></span>
    452. 

  452.               <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    453. 

  453.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    454. 

  454.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, idx) in items2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleInnerClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    455. 

  455.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    456. 

  456.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    457. 

  457.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    458. 

  458.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, idx) in items1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleOuterClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idx + 100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    459. 

  459.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    460. 

  460.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    461. 

  461.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    462. 

  462. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/ecmascript-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    463. 

  463. <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    464. 

  464. <span class="token keyword">import</span> NestedScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/nested-scroll'</span>
    465. 

  465. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>NestedScroll<span class="token punctuation">)</span>
    466. 

  466. 

  467. <span class="token keyword">const</span> _data1 <span class="token operator">=</span> <span class="token punctuation">[</span>
    468. 

  468.   <span class="token string">'👈🏻  outer 👉🏻 '</span><span class="token punctuation">,</span>
    469. 

  469.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span>
    470. 

  470. <span class="token punctuation">]</span>
    471. 

  471. 

  472. <span class="token keyword">const</span> _data2 <span class="token operator">=</span> <span class="token punctuation">[</span>
    473. 

  473.   <span class="token string">'👈🏻  inner 👉🏻  '</span><span class="token punctuation">,</span>
    474. 

  474.   <span class="token string">'🙂 🤔 😄 🤨 😐 🙃 '</span><span class="token punctuation">,</span>
    475. 

  475.   <span class="token string">'👈🏻  inner 👉🏻 '</span><span class="token punctuation">,</span>
    476. 

  476.   <span class="token string">'😔 😕 🙃 🤑 😲 ☹️ '</span><span class="token punctuation">,</span>
    477. 

  477.   <span class="token string">'👈🏻  inner 👉🏻 '</span><span class="token punctuation">,</span>
    478. 

  478.   <span class="token string">'🐣 🐣 🐣 🐣 🐣 🐣 '</span><span class="token punctuation">,</span>
    479. 

  479.   <span class="token string">'👈🏻  inner 👉🏻 '</span><span class="token punctuation">,</span>
    480. 

  480.   <span class="token string">'🐥 🐥 🐥 🐥 🐥 🐥 '</span>
    481. 

  481. <span class="token punctuation">]</span>
    482. 

  482. 

  483. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    484. 

  484.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    485. 

  485.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    486. 

  486.       <span class="token literal-property property">items1</span><span class="token operator">:</span> _data1<span class="token punctuation">,</span>
    487. 

  487.       <span class="token literal-property property">items2</span><span class="token operator">:</span> _data2
    488. 

  488.     <span class="token punctuation">}</span>
    489. 

  489.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    490. 

  490.   <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    491. 

  491.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initBScroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    492. 

  492.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    493. 

  493.   <span class="token function">beforeDestroy</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    494. 

  494.     <span class="token keyword">this</span><span class="token punctuation">.</span>outerScroll<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    495. 

  495.     <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    496. 

  496.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    497. 

  497.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    498. 

  498.     <span class="token function">handleOuterClick</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    499. 

  499.       window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'clicked outer item'</span><span class="token punctuation">)</span>
    500. 

  500.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    501. 

  501.     <span class="token function">handleInnerClick</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    502. 

  502.       window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'clicked inner item'</span><span class="token punctuation">)</span>
    503. 

  503.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    504. 

  504.     <span class="token function">initBScroll</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    505. 

  505.       <span class="token comment">// outer</span>
    506. 

  506.       <span class="token keyword">this</span><span class="token punctuation">.</span>outerScroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>outerScroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    507. 

  507.         <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    508. 

  508.           <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'horizontal-nested-scroll'</span>  <span class="token comment">// groupId is a string or number</span>
    509. 

  509.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    510. 

  510.         <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    511. 

  511.         <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    512. 

  512.         <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    513. 

  513.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    514. 

  514.       <span class="token comment">// inner</span>
    515. 

  515.       <span class="token keyword">this</span><span class="token punctuation">.</span>innerScroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>innerScroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    516. 

  516.         <span class="token comment">// please keep the same groupId as above</span>
    517. 

  517.         <span class="token comment">// outerScroll and innerScroll will be controlled by the same nestedScroll instance</span>
    518. 

  518.         <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    519. 

  519.           <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'horizontal-nested-scroll'</span>
    520. 

  520.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    521. 

  521.         <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    522. 

  522.         <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    523. 

  523.         <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    524. 

  524.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    525. 

  525.     <span class="token punctuation">}</span>
    526. 

  526.   <span class="token punctuation">}</span>
    527. 

  527. <span class="token punctuation">}</span>
    528. 

  528. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-styl extra-class"><pre class="language-styl"><code><span class="token selector">&lt;style lang=&quot;stylus&quot; rel=&quot;stylesheet/stylus&quot; scoped&gt;</span>
    529. 

  529.   <span class="token selector">.outer-wrapper</span>
    530. 

  530.     <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0.1</span><span class="token punctuation">)</span></span></span>
    531. 

  531.     <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span></span>
    532. 

  532.     <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    533. 

  533.     <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span></span>
    534. 

  534.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    535. 

  535.     <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    536. 

  536.     <span class="token selector">.outer-content</span>
    537. 

  537.       <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> inline-block</span>
    538. 

  538.       <span class="token property-declaration"><span class="token property">vertical-align</span><span class="token punctuation">:</span> top</span>
    539. 

  539.       <span class="token property-declaration"><span class="token property">white-space</span><span class="token punctuation">:</span> nowrap</span>
    540. 

  540. 

  541.   <span class="token selector">.inner-wrapper</span>
    542. 

  542.     <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span> solid <span class="token hexcode">#62B791</span></span>
    543. 

  543.     <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span></span>
    544. 

  544.     <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    545. 

  545.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    546. 

  546.     <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">px</span></span>
    547. 

  547.     <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    548. 

  548.     <span class="token selector">.inner-content</span>
    549. 

  549.       <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> inline-block</span>
    550. 

  550.       <span class="token property-declaration"><span class="token property">vertical-align</span><span class="token punctuation">:</span> top</span>
    551. 

  551. 

  552.   <span class="token selector">.list-item</span>
    553. 

  553.     <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> inline-block</span>
    554. 

  554.     <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span></span>
    555. 

  555. 

  556.   <span class="token selector">.inner-list-item</span>
    557. 

  557.     <span class="token property-declaration"><span class="token property">vertical-align</span><span class="token punctuation">:</span> top <span class="token comment">// important</span></span>
    558. 

  558.     <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">98</span><span class="token punctuation">,</span><span class="token number">183</span><span class="token punctuation">,</span><span class="token number">145</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span></span></span>
    559. 

  559. &lt;/style&gt;</code></pre></div></div> <i class="demo-code-content-copy"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#ccc"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg></i> <!----></div></div> <div class="demo-main"><div class="demo-component-wrap"></div></div></div></li></ul> <h2 id="instance-methods"><a href="#instance-methods" class="header-anchor">#</a> Instance Methods <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>All methods are proxied to BetterScroll instance, for example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    560. 

  560. <span class="token keyword">import</span> NestedScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/nested-scroll'</span>
    561. 

  561. 

  562. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>NestedScroll<span class="token punctuation">)</span>
    563. 

  563. 

  564. <span class="token keyword">const</span> bs1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.parent-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    565. 

  565.   <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    566. 

  566.     <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'dummy'</span>
    567. 

  567.   <span class="token punctuation">}</span>
    568. 

  568. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    569. 

  569. 

  570. <span class="token keyword">const</span> bs2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.child-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    571. 

  571.   <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    572. 

  572.     <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'dummy'</span>
    573. 

  573.   <span class="token punctuation">}</span>
    574. 

  574. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    575. 

  575. 

  576. <span class="token comment">// purge nestedScroll</span>
    577. 

  577. <span class="token comment">// bs1 and bs2 share the same nestedScroll instance because they have the same groupId</span>
    578. 

  578. bs1<span class="token punctuation">.</span><span class="token function">purgeNestedScroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// Same as bs2.purgeNestedScroll()</span>
    579. 

  579. </code></pre></div></div> <h3 id="purgenestedscroll"><a href="#purgenestedscroll" class="header-anchor">#</a> <code>purgeNestedScroll()</code></h3> <ul><li><strong>Details</strong>: Purge the nestedScroll that controls itself</li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Different <code>groupId</code> will generate different nestedScroll, and the same <code>groupId</code> will share the same nestedScroll, so you should call <code>purgeNestedScroll</code> at the right time (such as when the component is destroyed) to clean up the memory. Or you can call the destroy method of BetterScroll to remove itself from nestedScroll, for example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> bs1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.parent-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    580. 

  580.   <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    581. 

  581.     <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'dummy'</span>
    582. 

  582.   <span class="token punctuation">}</span>
    583. 

  583. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    584. 

  584. 

  585. <span class="token keyword">const</span> bs2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.child-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    586. 

  586.   <span class="token literal-property property">nestedScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    587. 

  587.     <span class="token literal-property property">groupId</span><span class="token operator">:</span> <span class="token string">'dummy'</span>
    588. 

  588.   <span class="token punctuation">}</span>
    589. 

  589. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    590. 

  590. 

  591. bs1<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// nestedScroll no longer constrains bs1</span>
    592. 

  592. bs2<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// nestedScroll no longer constrains bs2</span>
    593. 

  593. </code></pre></div></div> <h2 id="static-methods"><a href="#static-methods" class="header-anchor">#</a> Static Methods <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></h2> <h3 id="getallnestedscrolls"><a href="#getallnestedscrolls" class="header-anchor">#</a> <code>getAllNestedScrolls()</code></h3> <ul><li><p><strong>Details</strong>: Get all current nestedScroll instances</p></li> <li><p><strong>Returns</strong>: An array of nestedScroll instances</p></li></ul> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">import</span> NestedScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/nested-scroll'</span>
    594. 

  594. 

  595. <span class="token keyword">const</span> nestedScrolls<span class="token operator">:</span> NestedScroll<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> NestedScroll<span class="token punctuation">.</span><span class="token function">getAllNestedScrolls</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    596. 

  596. </code></pre></div><h3 id="purgeallnestedscrolls"><a href="#purgeallnestedscrolls" class="header-anchor">#</a> <code>purgeAllNestedScrolls()</code></h3> <ul><li><strong>Details</strong>: Purge all current nestedScroll instances</li></ul> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">import</span> NestedScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/nested-scroll'</span>
    597. 

  597. 

  598. <span class="token comment">// No longer constrain any BetterScroll instances</span>
    599. 

  599. NestedScroll<span class="token punctuation">.</span><span class="token function">purgeAllNestedScrolls</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    600. 

  600. </code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/ustbhuangyi/better-scroll/edit/dev/packages/vuepress-docs/docs/en-US/plugins/nested-scroll.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2/1/2021, 11:07:17 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    601. 

  601.       ←
    602. 

  602.       <a href="/docs/en-US/plugins/zoom.html" class="prev">
    603. 

  603.         zoom
    604. 

  604.       </a></span> <span class="next"><a href="/docs/en-US/plugins/infinity.html">
    605. 

  605.         infinity
    606. 

  606.       </a>
    607. 

  607.       →
    608. 

  608.     </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    609. 

  609.     <script src="/docs/assets/js/app.c71b64d3.js" defer></script><script src="/docs/assets/js/5.d6412664.js" defer></script><script src="/docs/assets/js/4.4855b9ef.js" defer></script><script src="/docs/assets/js/3.481632b4.js" defer></script><script src="/docs/assets/js/89.1b58abde.js" defer></script><script src="/docs/assets/js/7.518ccda7.js" defer></script><script src="/docs/assets/js/56.cd04bae9.js" defer></script>
    610. 

  610.   </body>
    611. 

  611. </html>
    612.