Accueil Explorer Aide
S'inscrire Connexion
wicresoft
/
doc_project
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Aborescence: 9cd9c7d1d5
Branches Tags
doc_project
/
better-scroll-docs
/
en-US
/
guide
/
base-scroll.html

base-scroll.html 135 KB
Historique Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574 
  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>base-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/80.e7e3ef35.js" as="script"><link rel="preload" href="/docs/assets/js/56.cd04bae9.js" as="script"><link rel="preload" href="/docs/assets/js/7.518ccda7.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/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/89.1b58abde.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 router-link-active">
    23. 

  23.   Guide
    24. 

  24. </a></div><div class="nav-item"><a href="/docs/en-US/plugins/" class="nav-link">
    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/guide/base-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/guide/base-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 router-link-active">
    37. 

  37.   Guide
    38. 

  38. </a></div><div class="nav-item"><a href="/docs/en-US/plugins/" class="nav-link">
    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/guide/base-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/guide/base-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>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/guide/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/docs/en-US/guide/how-to-install.html" class="sidebar-link">Install</a></li><li><a href="/docs/en-US/guide/use.html" class="sidebar-link">How to use</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Base Scroll</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/guide/base-scroll.html" aria-current="page" class="active sidebar-link">base-scroll</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/en-US/guide/base-scroll.html#get-started" class="sidebar-link">Get started</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/guide/base-scroll.html#dynamic-content" class="sidebar-link">Dynamic Content</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/guide/base-scroll.html#specifiedindexascontent" class="sidebar-link">specifiedIndexAsContent</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/guide/base-scroll.html#quadrant" class="sidebar-link">quadrant</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/guide/base-scroll.html#warm-tips" class="sidebar-link">Warm Tips</a></li></ul></li><li><a href="/docs/en-US/guide/base-scroll-options.html" class="sidebar-link">Options</a></li><li><a href="/docs/en-US/guide/base-scroll-api.html" class="sidebar-link">API</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="base-scroll"><a href="#base-scroll" class="header-anchor">#</a> base-scroll</h1> <p>In the design of BetterScroll 2.0, we abstracted the core scrolling part, which is the smallest unit of use of BetterScroll. The compression volume is nearly one-third smaller than <code>1.0</code>. You may only need to complete a pure scrolling, then just import this library as follows:</p> <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/core <span class="token parameter variable">--save</span>
    51. 

  51. </code></pre></div><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>
    52. 

  52.   <span class="token keyword">const</span> bs <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">'.div'</span><span class="token punctuation">)</span>
    53. 

  53. </code></pre></div><h2 id="get-started"><a href="#get-started" class="header-anchor">#</a> Get started</h2> <p>BetterScroll has a variety of scroll modes.</p> <ul><li><p><strong>vertical scroll</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_4eduojyhb8" 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>
    54. 

  54.   <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>core-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    55. 

  55.     <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>scroll-wrapper<span class="token punctuation">&quot;</span></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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    56. 

  56.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    57. 

  57.         <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>scroll-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 emojis<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 attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clickHandler(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>div</span><span class="token punctuation">&gt;</span></span>
    58. 

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

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

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

  61. <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">
    62. 

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

  63. 

  64.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    65. 

  65.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    66. 

  66.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    67. 

  67.         <span class="token literal-property property">emojis</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    68. 

  68.           <span class="token string">'😀 😁 😂 🤣 😃'</span><span class="token punctuation">,</span>
    69. 

  69.           <span class="token string">'😄 😅 😆 😉 😊'</span><span class="token punctuation">,</span>
    70. 

  70.           <span class="token string">'😫 😴 😌 😛 😜'</span><span class="token punctuation">,</span>
    71. 

  71.           <span class="token string">'👆🏻 😒 😓 😔 👇🏻'</span><span class="token punctuation">,</span>
    72. 

  72.           <span class="token string">'😑 😶 🙄 😏 😣'</span><span class="token punctuation">,</span>
    73. 

  73.           <span class="token string">'😞 😟 😤 😢 😭'</span><span class="token punctuation">,</span>
    74. 

  74.           <span class="token string">'🤑 😲 🙄 🙁 😖'</span><span class="token punctuation">,</span>
    75. 

  75.           <span class="token string">'👍 👎 👊 ✊ 🤛'</span><span class="token punctuation">,</span>
    76. 

  76.           <span class="token string">'🙄 ✋ 🤚 🖐 🖖'</span><span class="token punctuation">,</span>
    77. 

  77.           <span class="token string">'👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼'</span><span class="token punctuation">,</span>
    78. 

  78.           <span class="token string">'☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽'</span><span class="token punctuation">,</span>
    79. 

  79.           <span class="token string">'🌖 🌗 🌘 🌑 🌒'</span><span class="token punctuation">,</span>
    80. 

  80.           <span class="token string">'💫 💥 💢 💦 💧'</span><span class="token punctuation">,</span>
    81. 

  81.           <span class="token string">'🐠 🐟 🐬 🐳 🐋'</span><span class="token punctuation">,</span>
    82. 

  82.           <span class="token string">'😬 😐 😕 😯 😶'</span><span class="token punctuation">,</span>
    83. 

  83.           <span class="token string">'😇 😏 😑 😓 😵'</span><span class="token punctuation">,</span>
    84. 

  84.           <span class="token string">'🐥 🐣 🐔 🐛 🐤'</span><span class="token punctuation">,</span>
    85. 

  85.           <span class="token string">'💪 ✨ 🔔 ✊ ✋'</span><span class="token punctuation">,</span>
    86. 

  86.           <span class="token string">'👇 👊 👍 👈 👆'</span><span class="token punctuation">,</span>
    87. 

  87.           <span class="token string">'💛 👐 👎 👌 💘'</span><span class="token punctuation">,</span>
    88. 

  88.           <span class="token string">'👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼'</span><span class="token punctuation">,</span>
    89. 

  89.           <span class="token string">'☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽'</span><span class="token punctuation">,</span>
    90. 

  90.           <span class="token string">'🌖 🌗 🌘 🌑 🌒'</span><span class="token punctuation">,</span>
    91. 

  91.           <span class="token string">'💫 💥 💢 💦 💧'</span><span class="token punctuation">,</span>
    92. 

  92.           <span class="token string">'🐠 🐟 🐬 🐳 🐋'</span><span class="token punctuation">,</span>
    93. 

  93.           <span class="token string">'😬 😐 😕 😯 😶'</span><span class="token punctuation">,</span>
    94. 

  94.           <span class="token string">'😇 😏 😑 😓 😵'</span><span class="token punctuation">,</span>
    95. 

  95.           <span class="token string">'🐥 🐣 🐔 🐛 🐤'</span><span class="token punctuation">,</span>
    96. 

  96.           <span class="token string">'💪 ✨ 🔔 ✊ ✋'</span><span class="token punctuation">,</span>
    97. 

  97.           <span class="token string">'👇 👊 👍 👈 👆'</span><span class="token punctuation">,</span>
    98. 

  98.           <span class="token string">'💛 👐 👎 👌 💘'</span>
    99. 

  99.         <span class="token punctuation">]</span>
    100. 

  100.       <span class="token punctuation">}</span>
    101. 

  101.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    102. 

  102.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    103. 

  103.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    104. 

  104.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    105. 

  105.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    106. 

  106.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    107. 

  107.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    108. 

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

  109.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    110. 

  110.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs <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>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    111. 

  111.           <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    112. 

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

  113.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    114. 

  114.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollStart'</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>
    115. 

  115.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollStart-'</span><span class="token punctuation">)</span>
    116. 

  116.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    117. 

  117.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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 parameter"><span class="token punctuation">{</span> y <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    118. 

  118.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    119. 

  119.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    120. 

  120.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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 parameter">pos</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    121. 

  121.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pos<span class="token punctuation">)</span>
    122. 

  122.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    123. 

  123.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    124. 

  124.       <span class="token function">clickHandler</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    125. 

  125.         window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
    126. 

  126.       <span class="token punctuation">}</span>
    127. 

  127.     <span class="token punctuation">}</span>
    128. 

  128.   <span class="token punctuation">}</span>
    129. 

  129. </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>&lt;style lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span> scoped&gt;
    130. 

  130. 

  131. <span class="token selector">.core-container</span>
    132. 

  132.   <span class="token selector">.scroll-wrapper</span>
    133. 

  133.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">400</span><span class="token unit">px</span></span>
    134. 

  134.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    135. 

  135.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    136. 

  136.     <span class="token selector">.scroll-item</span>
    137. 

  137.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    138. 

  138.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    139. 

  139.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    140. 

  140.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    141. 

  141.       <span class="token property-declaration"><span class="token property">border-bottom</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#eee</span></span>
    142. 

  142.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    143. 

  143.       <span class="token selector">&amp;:nth-child(2n)</span>
    144. 

  144.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    145. 

  145.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    146. 

  146.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    147. 

  147. &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> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>BetterScroll dispatches the scroll event in real time, which requires setting <code>probeType</code> to 3.</p></div></li> <li><p><strong>Horizontal scroll</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_szg906c2kn" 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>
    148. 

  148.   <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>horizontal-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    149. 

  149.     <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>scroll-wrapper<span class="token punctuation">&quot;</span></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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    150. 

  150.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    151. 

  151.         <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>scroll-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 emojis<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>div</span><span class="token punctuation">&gt;</span></span>
    152. 

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

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

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

  155. <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">
    156. 

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

  157. 

  158.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    159. 

  159.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    160. 

  160.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    161. 

  161.         <span class="token literal-property property">emojis</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    162. 

  162.           <span class="token string">'👉🏼 😁 😂 🤣 👈🏼'</span><span class="token punctuation">,</span>
    163. 

  163.           <span class="token string">'😄 😅 😆 😉 😊'</span><span class="token punctuation">,</span>
    164. 

  164.           <span class="token string">'😫 😴 😌 😛 😜'</span><span class="token punctuation">,</span>
    165. 

  165.           <span class="token string">'👆🏻 😒 😓 😔 👇🏻'</span><span class="token punctuation">,</span>
    166. 

  166.           <span class="token string">'😑 😶 🙄 😏 😣'</span><span class="token punctuation">,</span>
    167. 

  167.           <span class="token string">'😞 😟 😤 😢 😭'</span><span class="token punctuation">,</span>
    168. 

  168.           <span class="token string">'🤑 😲 ☹️ 🙁 😖'</span><span class="token punctuation">,</span>
    169. 

  169.           <span class="token string">'👍 👎 👊 ✊ 🤛'</span><span class="token punctuation">,</span>
    170. 

  170.           <span class="token string">'☝️ ✋ 🤚 🖐 🖖'</span><span class="token punctuation">,</span>
    171. 

  171.           <span class="token string">'👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼'</span><span class="token punctuation">,</span>
    172. 

  172.           <span class="token string">'☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽'</span><span class="token punctuation">,</span>
    173. 

  173.           <span class="token string">'🌖 🌗 🌘 🌑 🌒'</span>
    174. 

  174.         <span class="token punctuation">]</span>
    175. 

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

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

  177.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    178. 

  178.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    179. 

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

  180.     <span class="token function">beforeDestroy</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>bs<span class="token punctuation">.</span><span class="token function">destroy</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 literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    184. 

  184.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    185. 

  185.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs <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>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    186. 

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

  187.           <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token comment">// listening scroll event</span>
    188. 

  188.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    189. 

  189.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollStart'</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>
    190. 

  190.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollStart-'</span><span class="token punctuation">)</span>
    191. 

  191.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    192. 

  192.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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 parameter"><span class="token punctuation">{</span> y <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    193. 

  193.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    194. 

  194.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    195. 

  195.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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>
    196. 

  196.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollingEnd'</span><span class="token punctuation">)</span>
    197. 

  197.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    198. 

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

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

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

  201. </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>&lt;style lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span> scoped&gt;
    202. 

  202. 

  203. <span class="token selector">.horizontal-container</span>
    204. 

  204.   <span class="token selector">.scroll-wrapper</span>
    205. 

  205.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    206. 

  206.     <span class="token property-declaration"><span class="token property">width</span> <span class="token number">90</span><span class="token unit">%</span></span>
    207. 

  207.     <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">80</span><span class="token unit">px</span> auto</span>
    208. 

  208.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    209. 

  209.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">3</span><span class="token unit">px</span> solid <span class="token hexcode">#42b983</span></span>
    210. 

  210.     <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">5</span><span class="token unit">px</span></span>
    211. 

  211.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    212. 

  212.     <span class="token selector">.scroll-content</span>
    213. 

  213.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    214. 

  214.     <span class="token selector">.scroll-item</span>
    215. 

  215.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    216. 

  216.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    217. 

  217.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    218. 

  218.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    219. 

  219.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    220. 

  220.       <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">0</span> <span class="token number">10</span><span class="token unit">px</span></span>
    221. 

  221. &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> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>BetterScroll achieves horizontal scrolling, which is more demanding for CSS. First you need to make sure that the wrapper doesn't wrap, and the display of content is inline-block.</p> <div class="language-stylus extra-class"><pre class="language-stylus"><code><span class="token selector">.scroll-wrapper</span>
    222. 

  222.   <span class="token comment">// ...</span>
    223. 

  223.   <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    224. 

  224. <span class="token selector">.scroll-content</span>
    225. 

  225.   <span class="token comment">// ...</span>
    226. 

  226.   <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    227. 

  227. </code></pre></div></div></li> <li><p><strong>freeScroll（Horizontal and vertical scroll simultaneously）</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_0fv3s0h200" 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>
    228. 

  228.   <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>free-scroll-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    229. 

  229.     <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>free-scroll-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    230. 

  230.       <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>scroll-wrapper<span class="token punctuation">&quot;</span></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>wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    231. 

  231.         <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    232. 

  232.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    233. 

  233.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    234. 

  234.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    235. 

  235.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    236. 

  236.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    237. 

  237.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    238. 

  238.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    239. 

  239.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    240. 

  240.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    241. 

  241.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    242. 

  242.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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 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 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 punctuation">&gt;</span></span>
    246. 

  246. <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 punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    247. 

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

  248.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    249. 

  249.     <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    250. 

  250.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    251. 

  251.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    252. 

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

  253.       <span class="token function">init</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    254. 

  254.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs <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>wrapper<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    255. 

  255.           <span class="token literal-property property">freeScroll</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    256. 

  256.           <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    257. 

  257.             <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    258. 

  258.             <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    259. 

  259.             <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    260. 

  260.             <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token boolean">false</span>
    261. 

  261.           <span class="token punctuation">}</span>
    262. 

  262.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    263. 

  263.       <span class="token punctuation">}</span>
    264. 

  264.     <span class="token punctuation">}</span>
    265. 

  265.   <span class="token punctuation">}</span>
    266. 

  266. </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; scoped&gt;
    267. 

  267. .free-scroll-container</span>
    268. 

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

  269.   <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    270. 

  270.   <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>
    271. 

  271.   <span class="token selector">.free-scroll-wrapper</span>
    272. 

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

  273.     <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    274. 

  274.     <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>
    275. 

  275.     <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">rgb</span><span class="token punctuation">(</span><span class="token number">96</span><span class="token punctuation">,</span> <span class="token number">108</span><span class="token punctuation">,</span> <span class="token number">113</span><span class="token punctuation">)</span></span></span>
    276. 

  276.     <span class="token property-declaration"><span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box</span>
    277. 

  277.     <span class="token selector">.scroll-wrapper</span>
    278. 

  278.       <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    279. 

  279.       <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    280. 

  280.       <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    281. 

  281.       <span class="token property-declaration"><span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    282. 

  282.       <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    283. 

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

  284.       <span class="token selector">.scroll-content</span>
    285. 

  285.         <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#efeff4</span></span>
    286. 

  286.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">1500</span><span class="token unit">px</span></span>
    287. 

  287.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">1000</span><span class="token unit">px</span></span>
    288. 

  288.         <span class="token selector">p</span>
    289. 

  289.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">16</span><span class="token unit">px</span></span>
    290. 

  290.           <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    291. 

  291.           <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    292. 

  292.           <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    293. 

  293. &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="dynamic-content"><a href="#dynamic-content" class="header-anchor">#</a> Dynamic Content <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.0.4</span></h2> <p>For the <code>2.0.4</code> version, it has the ability to detect <code>content</code> becoming other elements, you can check the following example.</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_i6i2iykib0" 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>
    294. 

  294.   <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>core-dynamic-content-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    295. 

  295.     <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>scroll-wrapper<span class="token punctuation">&quot;</span></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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    296. 

  296.       <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>scroll-content c1<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>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>!switcher<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    297. 

  297.         <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>scroll-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>n in nums1<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>n<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{n}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    298. 

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

  299.       <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>scroll-content c2<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>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>
    300. 

  300.         <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>scroll-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>n in nums2<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>n<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{nums2 - n + 1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    301. 

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

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

  303.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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>btn<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>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>switch content element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    304. 

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

  305. <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">
    306. 

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

  307. 

  308.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    309. 

  309.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    310. 

  310.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    311. 

  311.         <span class="token literal-property property">nums1</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
    312. 

  312.         <span class="token literal-property property">nums2</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
    313. 

  313.         <span class="token literal-property property">switcher</span><span class="token operator">:</span> <span class="token boolean">false</span>
    314. 

  314.       <span class="token punctuation">}</span>
    315. 

  315.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    316. 

  316.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    317. 

  317.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    318. 

  318.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    319. 

  319.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    320. 

  320.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    321. 

  321.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    322. 

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

  323.       <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    324. 

  324.         <span class="token keyword">this</span><span class="token punctuation">.</span>switcher <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>switcher
    325. 

  325.         <span class="token comment">// wait for Vue rerender</span>
    326. 

  326.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</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>
    327. 

  327.           <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    328. 

  328.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    329. 

  329.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    330. 

  330.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    331. 

  331.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs <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>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    332. 

  332.           <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span>
    333. 

  333.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    334. 

  334.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'contentChanged'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    335. 

  335.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'--- newContent ---'</span><span class="token punctuation">)</span>
    336. 

  336.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span>
    337. 

  337.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    338. 

  338.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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>
    339. 

  339.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    340. 

  340.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    341. 

  341.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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>
    342. 

  342.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollingEnd'</span><span class="token punctuation">)</span>
    343. 

  343.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    344. 

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

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

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

  347. </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>&lt;style lang=<span class="token string">&quot;stylus&quot;</span> scoped&gt;
    348. 

  348. 

  349. <span class="token selector">.core-dynamic-content-container</span>
    350. 

  350.   <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    351. 

  351.   <span class="token selector">.scroll-wrapper</span>
    352. 

  352.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">300</span><span class="token unit">px</span></span>
    353. 

  353.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    354. 

  354.     <span class="token selector">.scroll-item</span>
    355. 

  355.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    356. 

  356.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    357. 

  357.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    358. 

  358.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    359. 

  359.       <span class="token property-declaration"><span class="token property">border-bottom</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#eee</span></span>
    360. 

  360.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    361. 

  361.       <span class="token selector">&amp;:nth-child(2n)</span>
    362. 

  362.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    363. 

  363.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    364. 

  364.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    365. 

  365. 	<span class="token selector">.btn</span>
    366. 

  366. 		<span class="token property-declaration"><span class="token property">margin</span> <span class="token number">40</span><span class="token unit">px</span> auto</span>
    367. 

  367. 		<span class="token property-declaration"><span class="token property">padding</span> <span class="token number">10</span><span class="token unit">px</span></span>
    368. 

  368. 		<span class="token property-declaration"><span class="token property">color</span> <span class="token hexcode">#fff</span></span>
    369. 

  369. 		<span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">4</span><span class="token unit">px</span></span>
    370. 

  370. 		<span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">20</span><span class="token unit">px</span></span>
    371. 

  371. 		<span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#666</span>    </span>
    372. 

  372. &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> <h2 id="specifiedindexascontent"><a href="#specifiedindexascontent" class="header-anchor">#</a> specifiedIndexAsContent <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.0.4</span></h2> <p>For the <code>2.0.4</code> version, you can specify a child of <strong>wrapper</strong> as <strong>content</strong>. In previous versions, BetterScroll would only process the first child element of the wrapper. <a href="/docs/en-US/guide/base-scroll-options.html#specifiedindexascontent-2-0-4">For details.</a></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_k9leaeubbr" 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>
    373. 

  373.   <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>core-specified-content-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    374. 

  374.     <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>scroll-wrapper<span class="token punctuation">&quot;</span></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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    375. 

  375.       <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>ignore-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    376. 

  376.         The Blue area is not taken as BetterScroll's content
    377. 

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

  378.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    379. 

  379.         <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>scroll-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>n in nums<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>n<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{n}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    380. 

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

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

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

  383. <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">
    384. 

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

  385. 

  386.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    387. 

  387.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    388. 

  388.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    389. 

  389.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">30</span>
    390. 

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

  391.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    392. 

  392.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    393. 

  393.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    394. 

  394.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    395. 

  395.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    396. 

  396.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    397. 

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

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

  399.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    400. 

  400.         window<span class="token punctuation">.</span>bs <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>bs <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>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    401. 

  401.           <span class="token literal-property property">specifiedIndexAsContent</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    402. 

  402.           <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span>
    403. 

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

  404.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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>
    405. 

  405.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    406. 

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

  407.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<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>
    408. 

  408.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollingEnd'</span><span class="token punctuation">)</span>
    409. 

  409.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    410. 

  410.       <span class="token punctuation">}</span>
    411. 

  411.     <span class="token punctuation">}</span>
    412. 

  412.   <span class="token punctuation">}</span>
    413. 

  413. </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>&lt;style lang=<span class="token string">&quot;stylus&quot;</span> scoped&gt;
    414. 

  414. 

  415. <span class="token selector">.core-specified-content-container</span>
    416. 

  416.   <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    417. 

  417.   <span class="token selector">.scroll-wrapper</span>
    418. 

  418.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">400</span><span class="token unit">px</span></span>
    419. 

  419.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    420. 

  420.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#42b983</span></span>
    421. 

  421.     <span class="token selector">.ignore-content</span>
    422. 

  422.       <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">20</span><span class="token unit">px</span></span>
    423. 

  423.       <span class="token property-declaration"><span class="token property">color</span> <span class="token color">white</span></span>
    424. 

  424.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">20</span><span class="token unit">px</span></span>
    425. 

  425.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    426. 

  426.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#2c3e50</span></span>
    427. 

  427.     <span class="token selector">.scroll-item</span>
    428. 

  428.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    429. 

  429.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    430. 

  430.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    431. 

  431.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    432. 

  432.       <span class="token property-declaration"><span class="token property">border-bottom</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#eee</span></span>
    433. 

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

  434.       <span class="token selector">&amp;:nth-child(2n)</span>
    435. 

  435.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    436. 

  436.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    437. 

  437.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    438. 

  438. &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> <h2 id="quadrant"><a href="#quadrant" class="header-anchor">#</a> quadrant <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.3.0</span></h2> <p>For the <code>2.3.0</code> version, If the parent element or ancestor element of BetterScroll wrapper DOM rotates, you can use the <code>quadrant</code> option to modify the user's interactive behavior.</p> <ul><li><strong>Vertical becomes Horizontal</strong></li></ul> <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_3ea6z9xvu0" 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>
    439. 

  439.   <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>vertical-rotated-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    440. 

  440.     <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>description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Horizontal layout via CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    441. 

  441.     <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>scroll-wrapper<span class="token punctuation">&quot;</span></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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    442. 

  442.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    443. 

  443.         <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>scroll-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>num in nums<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>num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    444. 

  444.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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 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 punctuation">&gt;</span></span>
    447. 

  447. <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">
    448. 

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

  449. 

  450.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    451. 

  451.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    452. 

  452.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    453. 

  453.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">8</span>
    454. 

  454.       <span class="token punctuation">}</span>
    455. 

  455.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    456. 

  456.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    457. 

  457.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    458. 

  458.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    459. 

  459.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    460. 

  460.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    461. 

  461.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    462. 

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

  463.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    464. 

  464.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs <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>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    465. 

  465.           <span class="token comment">// v2.3.0</span>
    466. 

  466.           <span class="token literal-property property">quadrant</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token comment">// rotate90</span>
    467. 

  467.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    468. 

  468.       <span class="token punctuation">}</span>
    469. 

  469.     <span class="token punctuation">}</span>
    470. 

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

  471. </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>&lt;style lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span> scoped&gt;
    472. 

  472. 

  473. <span class="token selector"><span class="token comment">/* horizontal by CSS */</span>
    474. 

  474. .scroll-wrapper</span>
    475. 

  475.   <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">90</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    476. 

  476. <span class="token selector">.vertical-rotated-container</span>
    477. 

  477.   <span class="token selector">.description</span>
    478. 

  478.     <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    479. 

  479.   <span class="token selector">.scroll-wrapper</span>
    480. 

  480.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">250</span><span class="token unit">px</span></span>
    481. 

  481.     <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">px</span></span>
    482. 

  482.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    483. 

  483.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    484. 

  484.     <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> auto</span>
    485. 

  485.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ccc</span></span>
    486. 

  486.     <span class="token selector">.scroll-item</span>
    487. 

  487.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    488. 

  488.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">px</span></span>
    489. 

  489.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    490. 

  490.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    491. 

  491.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    492. 

  492.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    493. 

  493.       <span class="token selector">&amp;:nth-child(2n)</span>
    494. 

  494.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    495. 

  495.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    496. 

  496.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    497. 

  497. &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> <ul><li><strong>Horizontal scroll flipped</strong></li></ul> <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_lryu3itii7" 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>
    498. 

  498.   <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>horizontal-rotated-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    499. 

  499.     <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>description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flipping layout via CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    500. 

  500.     <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>scroll-wrapper<span class="token punctuation">&quot;</span></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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    501. 

  501.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    502. 

  502.         <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>scroll-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>num in nums<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>num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    503. 

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

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

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

  506. <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">
    507. 

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

  508. 

  509.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    510. 

  510.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    511. 

  511.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    512. 

  512.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">8</span>
    513. 

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

  514.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    515. 

  515.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    516. 

  516.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    517. 

  517.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    518. 

  518.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    519. 

  519.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    520. 

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

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

  522.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    523. 

  523.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs <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>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    524. 

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

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

  526.           <span class="token comment">// v2.3.0</span>
    527. 

  527.           <span class="token literal-property property">quadrant</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token comment">// rotate180</span>
    528. 

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

  529.       <span class="token punctuation">}</span>
    530. 

  530.     <span class="token punctuation">}</span>
    531. 

  531.   <span class="token punctuation">}</span>
    532. 

  532. </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>&lt;style lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span> scoped&gt;
    533. 

  533. 

  534. <span class="token selector"><span class="token comment">/* flipping by CSS */</span>
    535. 

  535. .scroll-wrapper</span>
    536. 

  536.   <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">180</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    537. 

  537. <span class="token selector">.horizontal-rotated-container</span>
    538. 

  538.   <span class="token selector">.description</span>
    539. 

  539.     <span class="token property-declaration"><span class="token property">margin-bottom</span> <span class="token number">40</span><span class="token unit">px</span></span>
    540. 

  540.     <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    541. 

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

  542.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    543. 

  543.     <span class="token property-declaration"><span class="token property">width</span> <span class="token number">250</span><span class="token unit">px</span></span>
    544. 

  544.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    545. 

  545.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    546. 

  546.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    547. 

  547.     <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> auto</span>
    548. 

  548.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ccc</span></span>
    549. 

  549.     <span class="token selector">.scroll-content</span>
    550. 

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

  551.     <span class="token selector">.scroll-item</span>
    552. 

  552.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    553. 

  553.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">px</span></span>
    554. 

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

  555.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    556. 

  556.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    557. 

  557.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    558. 

  558.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    559. 

  559.       <span class="token selector">&amp;:nth-child(2n)</span>
    560. 

  560.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    561. 

  561.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    562. 

  562.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    563. 

  563. &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> <h2 id="warm-tips"><a href="#warm-tips" class="header-anchor">#</a> Warm Tips</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><strong>If there is any situation where scrolling is not possible, you should first check if the height/width of the content element is greater than the height/width of the wrapper</strong>. This is a prerequisite for content to scroll.</p> <p>If the content has an image, it may happen that the image has not been downloaded when the DOM element is rendered, so the height of the content element is less than expected, and the scrolling is not normal. At this point you should call the <code>bs.refresh</code> method after the image has been loaded, such as the <code>onload</code> event callback, which will recalculate the latest scrolling size.</p></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/guide/base-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">4/19/2021, 8:15:26 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    564. 

  564.       ←
    565. 

  565.       <a href="/docs/en-US/guide/use.html" class="prev">
    566. 

  566.         How to use
    567. 

  567.       </a></span> <span class="next"><a href="/docs/en-US/guide/base-scroll-options.html">
    568. 

  568.         Options
    569. 

  569.       </a>
    570. 

  570.       →
    571. 

  571.     </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    572. 

  572.     <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/80.e7e3ef35.js" defer></script><script src="/docs/assets/js/56.cd04bae9.js" defer></script><script src="/docs/assets/js/7.518ccda7.js" defer></script>
    573. 

  573.   </body>
    574. 

  574. </html>
    575.