diff --git a/docs/demos/views/popup.vue b/docs/demos/views/popup.vue index 25ca51d89..a0ec1b19a 100644 --- a/docs/demos/views/popup.vue +++ b/docs/demos/views/popup.vue @@ -2,13 +2,23 @@ {{ $t('button1') }} - {{ $t('content') }} + {{ $t('content') }} {{ $t('button2') }} - - {{ $t('button3') }} + + + + +
    +
  • {{ i }} item item item
  • +
+
+ +

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.

+
+
{{ $t('button4') }} @@ -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 { diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js index c3b380bfe..01241e767 100644 --- a/packages/mixins/popup/index.js +++ b/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; diff --git a/packages/utils/scroll.js b/packages/utils/scroll.js index 2d0b343d0..a017c10be 100644 --- a/packages/utils/scroll.js +++ b/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; }, // 判断元素是否被加入到页面节点内