Fix nest scrolls bug (#340)

* fix(scroll): outer scroll disabled when inner scroll invoke scrollTo

* chore(scroll): fix test bug in nest scroll

* fix(scroll): add 'none' nestMode

* fix(scroll-nav): can not scroll when nav-bar reach boundary

* chore(scroll): update scroll docs

Author: tank0317

document/components/docs/en-US/scroll.md

@@ -11,7 +11,7 @@ So for the Scroll component, The length of `.cube-scroll-content`, the scroll-co
 
 2）Scrolling horizontally: **The width of the content element must be greater than the container element.** Since the child element's width does not exceed the container element by default, the Scroll component's `.cube-scroll-content` element needs to be set to a width greater than the `.cube-scroll-wrapper`.
 
-> Note: If there is any situation where scrolling is not possible, you should first check if the height/width of the content element `.cube-scroll-content` is greater than the height/width of the container element `.cube-scroll-wrapper`. This is a prerequisite for content to scroll. **If there is  images in the content, the scrolling should be not normal. The reason is images may not be downloaded when the DOM element is rendered, so the height of the content element is less than expected. At this point you should manually call the Scroll component's `refresh()` method after the image has been loaded, such as calling in the onload event callback, which will recalculate the scroll distance.**
+> Note: If there is any situation where scrolling is not possible, you should first check if the height/width of the content element `.cube-scroll-content` is greater than the height/width of the container element `.cube-scroll-wrapper`. This is a prerequisite for content to scroll. **If there is  images in the content, the scrolling should be not normal. The reason is images may not be downloaded when the DOM element is rendered, so the height of the content element is less than expected. At this point you should manually call the Scroll component's `refresh()` method after the image has been loaded, such as calling in the onload event callback, which will recalculate the scroll distance.** Scroll related FAQs can seek [Cube-UI/Question-Answer].
 
 
 ### Example
@@ -415,7 +415,7 @@ Scroll components can meet the scrolling needs of most mobile applications. In t
 | listenScroll | whether to dispatch scroll event. `Deprecated`, please use the property `scroll-events` instead. | Boolean | true/false | false |
 | listenBeforeScroll | whether to dispatch  before-scroll-start event. `Deprecated`, please use the property `scroll-events` instead. | Boolean | true/false | false |
 | refreshDelay | the delay of scroll refresh after `data` updating | Number | - | 20 |
-| nestMode<sup>1.11.0</sup> | Nested scroll mode, the default is `native` mode, only to determine whether to reach the boundary and start the outer scroll when starting scrolling, consistent with the browser's native nested scrolling. In the `free` mode, as long as the boundary is triggered during the inner scrolling process, the outer scrolling is turned on.  | String | 'native', 'free' | 'native' |
+| nestMode<sup>1.11.0</sup> | Nested scroll mode, the default is `native` mode, only to determine whether to reach the boundary and start the outer scroll when starting scrolling, consistent with the browser's native nested scrolling. In the `free` mode, as long as the boundary is triggered during the inner scrolling process, the outer scrolling is turned on. In extreme cases, you can specify the `none` mode for the inner Scroll to disable nested processing logic.  | String | 'native', 'free', 'none' | 'native' |
 
 In `options`, there are three frequently-used options, `scrollbar`、`pullDownRefresh`、`pullUpLoad`, which could set as `Boolean`(`false` to disable the feature, `true` to enable the feature and use default sub configuration), or `Object` to enable the feature and customize the sub configuration.
 

document/components/docs/zh-CN/scroll.md

@@ -12,7 +12,7 @@
 
   2）横向滚动：**内容元素的宽度必须大于容器元素**。由于在默认情况下，子元素的宽度不会超过容器元素，所以需要给 Scroll 组件的 `.cube-scroll-content` 元素设置大于 `.cube-scroll-wrapper` 的宽度。
 
-  > 注意：任何时候如果出现无法滚动的情况，都应该首先查看内容元素`.cube-scroll-content`的元素高度/宽度是否大于容器元素`.cube-scroll-wrapper`的高度/宽度。这是内容能够滚动的前提条件。**如果内容存在图片的情况，可能会出现 DOM 元素渲染时图片还未下载，因此内容元素的高度小于预期，出现滚动不正常的情况。此时你应该在图片加载完成后，比如 onload 事件回调中，手动调用 Scroll 组件的 `refresh()` 方法，它会重新计算滚动距离。**
+  > 注意：任何时候如果出现无法滚动的情况，都应该首先查看内容元素`.cube-scroll-content`的元素高度/宽度是否大于容器元素`.cube-scroll-wrapper`的高度/宽度。这是内容能够滚动的前提条件。**如果内容存在图片的情况，可能会出现 DOM 元素渲染时图片还未下载，因此内容元素的高度小于预期，出现滚动不正常的情况。此时你应该在图片加载完成后，比如 onload 事件回调中，手动调用 Scroll 组件的 `refresh()` 方法，它会重新计算滚动距离。** Scroll 相关常见问题可以查看 [Cube-UI/Question-Answer](https://github.com/cube-ui/question-answer/issues?utf8=✓&q=is%3Aissue+is%3Aopen+scroll).
 
 ### 示例
 
@@ -416,7 +416,7 @@
 | listenScroll | 是否派发 scroll 事件。`即将废弃`，推荐使用 `scroll-events` 属性 | Boolean | true/false | false |
 | listenBeforeScroll | 是否派发 before-scroll-start 事件。`即将废弃`，推荐使用 `scroll-events` 属性 | Boolean | true/false | false |
 | refreshDelay | data属性的数据更新后，scroll 的刷新延时 | Number | - | 20 |
-| nestMode<sup>1.11.0</sup> | 嵌套滚动模式，默认是`native`模式，只在开始滚动时判断是否到达边界并开启外层滚动，与浏览器原生的嵌套滚动保持一致。`free`模式下，内层滚动过程中只要触发边界，便会开启外层滚动。| String | 'native', 'free' | 'native' |
+| nestMode<sup>1.11.0</sup> | 嵌套滚动模式，默认是`native`模式，只在开始滚动时判断是否到达边界并开启外层滚动，与浏览器原生的嵌套滚动保持一致。`free`模式下，内层滚动过程中只要触发边界，便会开启外层滚动。极端情况下，你可以给内层 Scroll 指定 `none` 模式，禁止嵌套处理逻辑。| String | 'native', 'free', 'none' | 'native' |
 
 `options`中 better-scroll 的几个常用配置项，`scrollbar`、`pullDownRefresh`、`pullUpLoad`这三个配置即可设为 `Boolean`（`false` 关闭该功能，`true` 开启该功能，并使用默认子配置），也可设为`Object`，开启该功能并具体定制其子配置项。
 

src/components/scroll-nav-bar/scroll-nav-bar.vue

@@ -2,6 +2,7 @@
   <div class="cube-scroll-nav-bar" :class="'cube-scroll-nav-bar_' + direction">
     <cube-scroll
       ref="scroll"
+      nestMode="none"
       :options="options"
       :direction="direction">
       <div class="cube-scroll-nav-bar-items" ref="items">

src/components/scroll/scroll.vue

@@ -267,7 +267,7 @@
 
         this.scroll = new BScroll(this.$refs.wrapper, options)
 
-        this.parentScroll && this._handleNestScroll()
+        this.parentScroll && this.nestMode !== 'none' && this._handleNestScroll()
 
         this._listenScrollEvents()
 
@@ -355,11 +355,11 @@
           })
 
           innerScroll.on('scroll', (pos) => {
-            if (this.nestMode === NEST_MODE_NATIVE && !this.touchStartMoment) {
+            if (!innerScroll.initiated || innerScroll.isInTransition) {
               return
             }
 
-            if (innerScroll.isInTransition) {
+            if (this.nestMode === NEST_MODE_NATIVE && !this.touchStartMoment) {
               return
             }
 

test/unit/specs/scroll.spec.js

@@ -485,15 +485,20 @@ describe('Scroll', () => {
     })
 
     it('should disable inner scroll when touch the inner one and reach boundary', function (done) {
+      let cnt = 0
       vm = createNestScrolls({
         outerProps: {
           scrollEvents: ['scroll']
         },
         outerEvents: {
           scroll: () => {
-            // the inner scroll was disabled in first 'scroll' event, so here we skip first 'scroll' event
-            expect(innerScroll.scroll.enabled).to.be.false
-            done()
+            // there will be two 'scroll' event, one fired by dispatchEvent and one fired by resetPosition in _end() function.
+            // we only concern the first scroll event.
+            if (cnt === 0) {
+              cnt++
+              expect(innerScroll.scroll.enabled).to.be.false
+              done()
+            }
           }
         }
       })