Fix scrolls nest mode (didi#345)

* fix(scroll): set nestMode default to 'none'

* chore(scroll): update examples

* chore(scroll): update scroll docs

* chore(scroll): update unit test

* fix(scroll): update

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

@@ -306,7 +306,7 @@ Scroll components can meet the scrolling needs of most mobile applications. In t
 
   **6. Vertical nested scrolls - Vertical Scrolls**<sup>1.11.0</sup>
 
-  The `Scroll` component also supports nested scenes (currently only supports two levels of nesting). It's worth celebrating that you don't need to do any work, just use the `Scroll` component as usual. The `Scroll` component will determine if there is a nesting situation and handle nested scrolling issues. By default, nested `Scroll` has the same scrolling behavior as the browser's native nested scene. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/vertical-scrolls.vue).
+  The `Scroll` component also supports nested scenes (currently only supports two levels of nesting). when there is scroll nest, you need to config the inner `scroll` component's `nestMode` prop，the options can be 'native' or 'free'. when set to 'native', nested `Scroll` has the same scrolling behavior as the browser's native nested scene. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/vertical-scrolls.vue).
 
   ```html
   <cube-scroll
@@ -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. In extreme cases, you can specify the `none` mode for the inner Scroll to disable nested processing logic.  | String | 'native', 'free', 'none' | 'native' |
+| nestMode<sup>1.11.0</sup> | Nested scroll mode, the default is `none` mode that do no thing when there is scroll nest. In `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 | 'none', 'native', 'free' | 'none' |
 
 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

@@ -307,7 +307,7 @@
 
 - **6. 嵌套纵向滚动 - Vertical Scrolls**<sup>1.11.0</sup>
 
-  `Scroll`组件还支持嵌套的场景(目前只支持两层嵌套)。值得庆祝的是，对于你不需要做任何工作，只需要像平时使用`Scroll`组件一样即可。`Scroll`组件会自行判断是否有嵌套情况，同时处理嵌套滚动问题。默认情况下，嵌套`Scroll`与浏览器原生嵌套场景的滚动行为相同。下面是`Scroll`组件实现纵向嵌套滚动的例子。完整的示例代码在这里[这里](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/vertical-scrolls.vue)。
+  `Scroll`组件还支持嵌套的场景(目前只支持两层嵌套)。当遇到嵌套场景时，你需要给内层`scroll`组件设置 Prop nestMode，可选值有 'native' 和 'free'。当设置为 'native' 时，嵌套`Scroll`与浏览器原生嵌套场景的滚动行为相同。下面是`Scroll`组件实现纵向嵌套滚动的例子。完整的示例代码在这里[这里](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/vertical-scrolls.vue)。
 
   ```html
   <cube-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`模式下，内层滚动过程中只要触发边界，便会开启外层滚动。极端情况下，你可以给内层 Scroll 指定 `none` 模式，禁止嵌套处理逻辑。| String | 'native', 'free', 'none' | 'native' |
+| nestMode<sup>1.11.0</sup> | 嵌套滚动模式，默认是`none`，即不做嵌套处理。`native`只在开始滚动时判断是否到达边界并开启外层滚动，与浏览器原生的嵌套滚动保持一致。`free`模式下，内层滚动过程中只要触发边界，便会开启外层滚动。| String | 'none', 'native', 'free' | 'none' |
 
 `options`中 better-scroll 的几个常用配置项，`scrollbar`、`pullDownRefresh`、`pullUpLoad`这三个配置即可设为 `Boolean`（`false` 关闭该功能，`true` 开启该功能，并使用默认子配置），也可设为`Object`，开启该功能并具体定制其子配置项。
 

example/pages/scroll/vertical-scrolls.vue

@@ -12,6 +12,7 @@
           </ul>
           <cube-scroll
             ref="scroll2"
+            nestMode="native"
             class="scroll-list-inner-wrap">
             <ul class="cube-scroll-list">
               <li class="cube-scroll-item border-bottom-1px"

src/components/scroll/scroll.vue

@@ -70,6 +70,7 @@
   const EVENT_BEFORE_SCROLL_START = 'before-scroll-start'
   const EVENT_SCROLL_END = 'scroll-end'
 
+  const NEST_MODE_NONE = 'none'
   const NEST_MODE_NATIVE = 'native'
 
   const SCROLL_EVENTS = [EVENT_SCROLL, EVENT_BEFORE_SCROLL_START, EVENT_SCROLL_END]
@@ -139,7 +140,7 @@
       },
       nestMode: {
         type: String,
-        default: NEST_MODE_NATIVE
+        default: NEST_MODE_NONE
       }
     },
     data() {
@@ -267,7 +268,7 @@
 
         this.scroll = new BScroll(this.$refs.wrapper, options)
 
-        this.parentScroll && this.nestMode !== 'none' && this._handleNestScroll()
+        this.parentScroll && this.nestMode !== NEST_MODE_NONE && this._handleNestScroll()
 
         this._listenScrollEvents()
 
@@ -355,6 +356,7 @@
           })
 
           innerScroll.on('scroll', (pos) => {
+            // if scroll event triggered not by touch event, such as by 'scrollTo' method
             if (!innerScroll.initiated || innerScroll.isInTransition) {
               return
             }
@@ -387,11 +389,13 @@
 
         let reachBoundary
         if (freeScroll) {
-          reachBoundary = reachBoundaryX || reachBoundaryY
-        } else if (this.direction === DIRECTION_V) {
-          reachBoundary = reachBoundaryY
-        } else if (this.direction === DIRECTION_H) {
+          return reachBoundaryX || reachBoundaryY
+        }
+
+        if (this.scroll.movingDirectionX) {
           reachBoundary = reachBoundaryX
+        } else if (this.scroll.movingDirectionY) {
+          reachBoundary = reachBoundaryY
         }
         return reachBoundary
       },

test/unit/specs/scroll.spec.js

@@ -549,7 +549,7 @@ describe('Scroll', () => {
         h(Scroll, {
           ref: 'innerScroll',
           class: 'inner-scroll',
-          props: {data, ...innerProps},
+          props: {data, nestMode: 'native', ...innerProps},
           on: {...innerEvents}
         }),
         h('ul', [