Skip to content

note scroll

Jump to bottom Edit New page
kuang edited this page May 18, 2017 · 1 revision

移动端弹出框滚动的问题： 首先看dom

<body>
    <div class="very-long"></div>
    <div class="pop-mask"></div>
    <div class="pop-wrap">
        <div class="pop-scroll"></div>
    </div>
</body>

body与very-long之间有滚动条

pop-wrap与pop-scroll之间有滚动条

pop-mask的touchmove事件中，阻止了默认事件

当pop-scroll滚动到最顶层时，再滑动手指，very-long与body就再进行一次滑动了

  • 解决方法1：

    对pop-scroll使用iscroll,利用transform进行模拟滚动

  • 解决方法2:

改造dom:

<body>
    <div class="main-wrap">
        <div class="very-long"></div>
    </div>
    <div class="pop-mask"></div>
    <div class="pop-wrap">
        <div class="pop-scroll"></div>
    </div>
</body>

main-wrap与very-long之间有滚动条，任何元素与body都不产生滚动条。这样就可以隔离掉 pop-scroll对body的影响

Add a custom footer
Add a custom sidebar
Clone this wiki locally