[bugfix] popup scrollable element (#429)

docs/demos/views/popup.vue

@@ -2,13 +2,23 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
-      <van-popup v-model="show1">{{ $t('content') }}</van-popup>
+      <van-popup v-model="show1" :prevent-scroll="true">{{ $t('content') }}</van-popup>
     </demo-block>
 
     <demo-block :title="$t('position')">
       <van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
-      <van-popup v-model="show2" position="bottom">
+
-        <van-button @click="showDialog">{{ $t('button3') }}</van-button>
+      <van-popup v-model="show2" position="bottom" :prevent-scroll="true">
+        <van-tabs>
+          <van-tab class="custom-pane" title="Tab1">
+            <ul class="scroller">
+              <li v-for="i in 30" :key="i" class="list-item">{{ i }} item item item</li>
+            </ul>
+          </van-tab>
+          <van-tab class="custom-pane" title="Tab2">
+            <p class="long-text">Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.</p>
+          </van-tab>
+        </van-tabs>
       </van-popup>
 
       <van-button @click="show3 = true">{{ $t('button4') }}</van-button>
@@ -92,6 +102,25 @@ export default {
     &--bottom {
       width: 100%;
       height: 200px;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    .van-tabs__content {
+      height: 166px;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      .list-item {
+        padding: 10px 10px;
+        &:not(:last-child) {
+          border-bottom: 1px solid #f9f9f9;
+        }
+      }
+      .long-text {
+        padding: 10px;
+        line-height: 1.4;
+        color: #666;
+      }
     }
 
     &--top {

packages/mixins/popup/index.js

@@ -1,5 +1,6 @@
 import manager from './popup-manager';
 import context from './popup-context';
+import scrollUtils from '../../utils/scroll';
 
 export default {
   props: {
@@ -58,7 +59,7 @@ export default {
       const dx = e.touches[0].clientX - pos.x;
       const dy = e.touches[0].clientY - pos.y;
       const direction = dy > 0 ? '10' : '01';
-      const el = this.$el.querySelector('.scroller') || this.$el;
+      const el = scrollUtils.getScrollEventTarget(e.target, this.$el);
       const scrollTop = el.scrollTop;
       const scrollHeight = el.scrollHeight;
       const offsetHeight = el.offsetHeight;

packages/utils/scroll.js

@@ -23,18 +23,22 @@ export default {
     };
   },
 
-  // 找到最近的触发滚动事件的元素
+  /* 找到最近的触发滚动事件的元素
-  getScrollEventTarget(element) {
+   * @param {Element} element
+	 * @param {Element} rootElement
+	 * @return {Element | window}
+   */
+  getScrollEventTarget(element, rootParent = window) {
     let currentNode = element;
     // bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
-    while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
+    while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1 && currentNode !== rootParent) {
       const overflowY = this.getComputedStyle(currentNode).overflowY;
       if (overflowY === 'scroll' || overflowY === 'auto') {
         return currentNode;
       }
       currentNode = currentNode.parentNode;
     }
-    return window;
+    return rootParent;
   },
 
   // 判断元素是否被加入到页面节点内