首頁 探索 說明
註冊 登入
wicresoft
/
doc_project
2
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
目錄樹: 9cd9c7d1d5
分支列表 標籤列表
doc_project
/
better-scroll-docs
/
en-US
/
FAQ
/
diagnosis.html

diagnosis.html 32 KB
文件歷史 原始文件

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 
  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>BetterScroll&#39;s &quot;diagnosis&quot; | 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/75.9497b6fa.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/56.cd04bae9.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/7.518ccda7.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/76.2081d35e.js"><link rel="prefetch" href="/docs/assets/js/77.e5a8b470.js"><link rel="prefetch" href="/docs/assets/js/78.6d3ef23b.js"><link rel="prefetch" href="/docs/assets/js/79.025583e1.js"><link rel="prefetch" href="/docs/assets/js/8.8547d4ad.js"><link rel="prefetch" href="/docs/assets/js/80.e7e3ef35.js"><link rel="prefetch" href="/docs/assets/js/81.569d569f.js"><link rel="prefetch" href="/docs/assets/js/82.ac3ed0f7.js"><link rel="prefetch" href="/docs/assets/js/83.3393dfc3.js"><link rel="prefetch" href="/docs/assets/js/84.e5352ac1.js"><link rel="prefetch" href="/docs/assets/js/85.c7cdb129.js"><link rel="prefetch" href="/docs/assets/js/86.0aa0af94.js"><link rel="prefetch" href="/docs/assets/js/87.0db12b1e.js"><link rel="prefetch" href="/docs/assets/js/88.e8651cfa.js"><link rel="prefetch" href="/docs/assets/js/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">
    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 router-link-active">
    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/FAQ/diagnosis.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/FAQ/diagnosis.html" class="nav-link">
    33. 

  33.   简体中文
    34. 

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

  35.     GitHub
    36. 

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

  37.   Guide
    38. 

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

  39.   Plugin
    40. 

  40. </a></div><div class="nav-item"><a href="/docs/en-US/FAQ/" class="nav-link router-link-active">
    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/FAQ/diagnosis.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/FAQ/diagnosis.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 open"><span>FAQ</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/FAQ/" aria-current="page" class="sidebar-link">FAQ</a></li><li><a href="/docs/en-US/FAQ/diagnosis.html" aria-current="page" class="active sidebar-link">BetterScroll's &quot;diagnosis&quot;</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="betterscroll-s-diagnosis"><a href="#betterscroll-s-diagnosis" class="header-anchor">#</a> BetterScroll's &quot;diagnosis&quot;</h1> <h3 id="question-1-why-can-t-my-betterscroll-work"><a href="#question-1-why-can-t-my-betterscroll-work" class="header-anchor">#</a> [Question 1] Why can't my BetterScroll work?</h3> <p>The problem basically lies in the <strong>Height Calculation Error</strong>. First of all, you must have a clear understanding of the scrolling principle of <code>BetterScroll</code>. For vertical scrolling, simply the height of the <code>wrapper</code> container is greater than the height of the <code>content</code> content, and the <code>translateY</code> is modified to achieve the purpose of scrolling. The principle of horizontal scrolling is similar. Then the calculation <strong>Scrollable Height</strong> is the logic necessary for <code>BetterScroll</code>. The general logic  is:</p> <p>1. <strong>Pictures with uncertain sizes</strong></p> <ul><li><p><strong>Reason</strong></p> <p>When js performs a calculation of the scrollable height, the image has not been rendered.</p></li> <li><p><strong>Solution</strong></p> <p>Call <code>bs.refresh()</code> inside the callback function of the image's <code>onload</code> to ensure that the correct height of the image is calculated before calculating the <strong>Scrollable Height</strong>.</p></li></ul> <p>2. <strong>Vue's keep-alive component</strong></p> <ul><li><p><strong>Scenes</strong></p> <p>Suppose there are two components of A and B wrapped by <code>keep-alive</code>, A component uses BetterScroll, does some operation in A component, pops up input keyboard, then enters B component, then returns to A component, <code>bs</code> is unable to scroll.</p></li> <li><p><strong>Reason</strong></p> <p>Because Vue's keep-alive's cache and the input keyboard pops up, it compresses the height of the viewable area, causing the previously calculated scrollable height to be incorrect.</p></li> <li><p><strong>Solution</strong></p> <p>You can call <code>bs.refresh()</code> on Vue's <code>activated</code> hook to recalculate the height or re-instantiate bs.</p></li></ul> <h3 id="question-2-why-do-brower-s-vertical-scrolling-failed-after-i-use-betterscroll-to-do-horizontal-scrolling"><a href="#question-2-why-do-brower-s-vertical-scrolling-failed-after-i-use-betterscroll-to-do-horizontal-scrolling" class="header-anchor">#</a> [Question 2] Why do brower's vertical scrolling failed after I use BetterScroll to do horizontal scrolling?</h3> <p>BetterScroll provides a feature of <code>slide</code>. If you implement a horizontal scrollin, such as <code>slide</code>. do vertical scrolling in the <code>slide</code> area, you can't bubble to the browser, so you can't manipulate the scroll bar of the native browser.</p> <ul><li><p><strong>Reason</strong></p> <p>The internal scrolling calculations of BetterScroll exist in the user's interaction. For example, the mobile terminal is the <code>touchstart/touchmove/touchend</code> event. The listeners of these events generally have the line <code>e.preventDefault()</code>, which will block the browser's default behavior so that the browser's scrollbar cannot be scrolled.</p></li> <li><p><strong>Solution</strong></p> <p>Configure the <code>eventPassthrough</code> attribute.</p> <div class="language-js extra-class"><pre class="language-js"><code>  Let 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">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    51. 

  51.     eventPassthrough<span class="token operator">:</span> <span class="token string">'vertical'</span> <span class="token comment">// keep vertical native scrolling</span>
    52. 

  52.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    53. 

  53. </code></pre></div></li></ul> <h3 id="question-3-why-can-t-i-pop-up-a-pop-up-window-after-using-betterscroll"><a href="#question-3-why-can-t-i-pop-up-a-pop-up-window-after-using-betterscroll" class="header-anchor">#</a> [Question 3] Why can't I pop up a pop-up window after using BetterScroll.</h3> <ul><li><p><strong>Reason</strong></p> <p><strong>question 2</strong> has been mentioned, it is caused by <code>e.preventDefault()</code> in touchstart.</p></li> <li><p><strong>Solution</strong></p> <p>Option 1: Configure the <code>preventDefaultException</code> property.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</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">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    54. 

  54.   <span class="token literal-property property">preventDefaultException</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    55. 

  55.     <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(^|\s)test(\s|$)</span><span class="token regex-delimiter">/</span></span>
    56. 

  56.   <span class="token punctuation">}</span>
    57. 

  57. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    58. 

  58. </code></pre></div><p><code>eventDefaultException</code> can be used to control the <code>e.preventDefault()</code> of the <code>touchstart</code> and <code>touchmove</code> events. If the above regular expression is used to check if the class name of the currently touched target element contains <code>test</code>, if passed, Then <code>e.preventDefault()</code> will not be called.</p> <p>Option 2: Configure the <code>preventDefault</code> property.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</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">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    59. 

  59.   <span class="token literal-property property">preventDefault</span><span class="token operator">:</span> <span class="token boolean">false</span>
    60. 

  60. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    61. 

  61. </code></pre></div><p><code>preventDefault</code> is set to <code>false</code>, there are some side effects, it is generally recommended to use <strong>Option one</strong>.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>The side effect is that the touch event may bubble up to the document, causing the document to be dragged. At this point you need to listen for the parent or ancestor element of the <code>wrapper</code> element, bind them to the touchmove event, and call <code>e.preventDefault()</code>.</p></div></li></ul> <h3 id="question-4-why-are-the-listeners-for-all-click-events-inside-betterscroll-content-not-triggered"><a href="#question-4-why-are-the-listeners-for-all-click-events-inside-betterscroll-content-not-triggered" class="header-anchor">#</a> [Question 4] Why are the listeners for all click events inside BetterScroll content not triggered?</h3> <ul><li><p><strong>Reason</strong></p> <p>Still caused by <code>e.preventDefault()</code>. On the mobile side, if you call <code>e.preventDefault()</code> inside the logic of <code>touchstart/touchmove/touchend</code>, it will prevent the execution of the click event of it and its child elements. Therefore, BetterScroll internally manages the dispatch of the <code>click</code> event, you only need the <code>click</code> configuration item.</p></li> <li><p><strong>Solution</strong></p> <p>Configure the <code>click</code> attribute.</p> <div class="language-js extra-class"><pre class="language-js"><code>  Let 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">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    62. 

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

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

  64. </code></pre></div></li></ul> <h3 id="question-5-why-is-the-click-event-dispatched-twice-when-nesting-betterscroll"><a href="#question-5-why-is-the-click-event-dispatched-twice-when-nesting-betterscroll" class="header-anchor">#</a> [Question 5] Why is the click event dispatched twice when Nesting BetterScroll?</h3> <ul><li><p><strong>Reason</strong></p> <p>As stated in <strong>Question 4</strong>, the BetterScroll dispatches a <code>click</code> event internally, and nested scenes must have two or more bs.</p></li> <li><p><strong>Solution</strong></p> <p>You can manage the bubbling of events by instantiating inner BetterScroll's <code>stopPropagation</code> configuration item, or by instantiating inner BetterScroll's <code>click</code> configuration item to prevent multiple triggers of clicks.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> innerBS <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">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    65. 

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

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

  67. 

  68. <span class="token comment">// or</span>
    69. 

  69. <span class="token keyword">let</span> innerBS <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">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    70. 

  70.   <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">false</span>
    71. 

  71. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    72. 

  72. </code></pre></div></li></ul> <h3 id="question-6-why-do-i-listen-to-the-scroll-event-of-bs-why-not-execute-the-callback"><a href="#question-6-why-do-i-listen-to-the-scroll-event-of-bs-why-not-execute-the-callback" class="header-anchor">#</a> [Question 6] Why do I listen to the scroll event of bs, why not execute the callback?</h3> <ul><li><p><strong>Reason</strong></p> <p>BetterScroll does not dispatch the <code>scroll</code> event at any time because there is a performance penalty for getting the scroll position of bs. As for whether or not to distribute, it depends on the <code>probeType</code> configuration item.</p></li> <li><p><strong>Solution</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>  Let 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> <span class="token punctuation">{</span>
    73. 

  73.     probeType<span class="token operator">:</span> <span class="token number">3</span> <span class="token comment">// real-time dispatch</span>
    74. 

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

  75. </code></pre></div></li></ul> <h3 id="question-7-in-two-vertically-nested-bs-scenes-why-move-the-inner-bs-will-cause-the-outer-layer-to-also-be-scrolled"><a href="#question-7-in-two-vertically-nested-bs-scenes-why-move-the-inner-bs-will-cause-the-outer-layer-to-also-be-scrolled" class="header-anchor">#</a> [Question 7] In two vertically nested bs scenes, why move the inner bs will cause the outer layer to also be scrolled.</h3> <ul><li><p><strong>Reason</strong></p> <p>The internal logic of BetterScroll is in the body of the listener function of the touch event. Since the touch event of the internal bs is triggered, it will naturally bubble to the outer bs.</p></li> <li><p><strong>Solution</strong></p> <p>Since you know the reason, there are corresponding solutions. For example, when you scroll the <strong>inner</strong> <code>bs</code>, listen for the <code>scroll</code> event and call the <strong>outer</strong> <code>bs.disable()</code> to disable the <strong>outer</strong> <code>bs</code>. When the <strong>inner</strong> <code>bs</code> scrolls to the bottom, it means that you need to scroll the <strong>outer</strong> <code>bs</code> at this time. At this time, call the <strong>outer</strong> <code>bs.enable()</code> to activate the outer layer and call the <strong>inner</strong> <code>bs.disable().</code> to forbid inner scrolling. In fact, think about it, this interaction is consistent with the nested scrolling behavior of the <code>Web browser</code>, except that the browser handles the various scrolling nesting logic for you, and the BetterScroll requires your own dispatched events and exposed APIs to fulfill.</p> <blockquote><p>The <a href="https://didi.github.io/cube-ui/example/#/scroll/v-scrolls" target="_blank" rel="noopener noreferrer">scroll<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> component of <code>cube-ui</code> gives a solution to this scenario. <a href="https://github.com/didi/cube-ui/blob/dev/src/components/scroll/scroll.vue" target="_blank" rel="noopener noreferrer">Code is here<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></p></blockquote></li></ul> <h3 id="question-8-in-the-vertical-bs-nesting-horizontal-bs-scene-why-does-the-vertical-movement-of-the-horizontal-bs-area-do-not-cause-vertical-scrolling-of-the-outer-vertical-bs"><a href="#question-8-in-the-vertical-bs-nesting-horizontal-bs-scene-why-does-the-vertical-movement-of-the-horizontal-bs-area-do-not-cause-vertical-scrolling-of-the-outer-vertical-bs" class="header-anchor">#</a> [Question 8] In the vertical bs nesting horizontal bs scene, why does the vertical movement of the horizontal bs area do not cause vertical scrolling of the outer vertical bs?</h3> <ul><li><p><strong>Reason</strong></p> <p>The reason is similar to <strong>Question 2</strong>, because <code>e.preventDefault()</code> affects the default scrolling behavior, causing the outer bs to not trigger the touch event.</p></li> <li><p><strong>Solution</strong></p> <p>The solution is to configure the <code>eventPassthrough</code> property of the inner bs to keep the default native vertical scrolling.</p> <div class="language-js extra-class"><pre class="language-js"><code>  Let innerBS <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">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    76. 

  76.     eventPassthrough<span class="token operator">:</span> <span class="token string">'vertical'</span> <span class="token comment">// keep vertical native scrolling</span>
    77. 

  77.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    78. 

  78. </code></pre></div></li></ul></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/FAQ/diagnosis.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">6/25/2019, 4:23:12 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    79. 

  79.       ←
    80. 

  80.       <a href="/docs/en-US/FAQ/" class="prev router-link-active">
    81. 

  81.         FAQ
    82. 

  82.       </a></span> <!----></p></div> </main></div><div class="global-ui"><!----></div></div>
    83. 

  83.     <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/75.9497b6fa.js" defer></script>
    84. 

  84.   </body>
    85. 

  85. </html>
    86.