Skip to content

页面本身具有滚动条,弹窗后也有滚动条,此时滑动弹窗的内容体验不好,特别是在webview中会有其他问题。因此实现,弹窗可以滚动,底部不能滚动效果。

Notifications You must be signed in to change notification settings

supermanHTL/popup-slide-htl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 

Repository files navigation

popup-slide-htl

页面本身具有滚动条,弹窗后也有滚动条,此时滑动弹窗的内容体验不好,特别是在webview中会有其他问题。因此实现,弹窗可以滚动,底部不能滚动效果。

##使用方法:

1、npm install popup-slide-htl

2、import popupSlideHtl from 'popup-slide-htl'

3、popupSlideHtl(maskerId,moveId)

例子: maskerId 为蒙版层的id,moveId为滑动区域的id

    <div id="masker">
        <div id="moveWrap">
             <div id="move">
                 <p>11111111111</p>
                 <p>2222222222222</p>
                 <p>3333333333</p>
                 <p>4444444444</p>
                 <p>5555555555</p>
                 <p>66666666666</p>
            </div>
          </div>
    </div>
    <script>
        import popupSlideHtl from 'popup-slide-htl'
        popupSlideHtl('masker','move')
    </script>

调用方法后,就可以实现,页面底部不能滑动,弹窗区域可以正常的滑动。

注意:这里的实现方式和用css控制body,html over-flow:hide的方式不同,这种实现方式会更佳。

About

页面本身具有滚动条,弹窗后也有滚动条,此时滑动弹窗的内容体验不好,特别是在webview中会有其他问题。因此实现,弹窗可以滚动,底部不能滚动效果。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published