<div id="thlxa"></div>

    <dl id="thlxa"><ol id="thlxa"></ol></dl>

    <div id="thlxa"></div>

    <sup id="thlxa"></sup>
    <dl id="thlxa"></dl>
    <em id="thlxa"></em>

    <sup id="thlxa"><menu id="thlxa"></menu></sup>

      <dl id="thlxa"></dl>

      <div id="thlxa"></div>

      <dl id="thlxa"><ins id="thlxa"></ins></dl>
      <sup id="thlxa"></sup>

        <dl id="thlxa"></dl>

        <dl id="thlxa"><menu id="thlxa"><form id="thlxa"></form></menu></dl>

        <em id="thlxa"></em>

          <sup id="thlxa"><menu id="thlxa"></menu></sup>
          <div id="thlxa"><ol id="thlxa"></ol></div>

            <em id="thlxa"></em>

                <dl id="thlxa"><menu id="thlxa"><small id="thlxa"></small></menu></dl><sup id="thlxa"><menu id="thlxa"></menu></sup>
                  <div id="thlxa"><tr id="thlxa"></tr></div>

                    <div id="thlxa"><ol id="thlxa"></ol></div>

                    <div id="thlxa"><ol id="thlxa"><mark id="thlxa"></mark></ol></div>

                    由于年后的各种问题,博客的更新中断了,现在算是稳定了下来,准备把自己暂时“丢掉”的博客再捡起来,不管怎样,开始都不算太晚。废话就不多说了,下面就进入到正题吧。

                    弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问题就是小萌最近开发项目时遇到的问题。

                    小萌最近在忙一个小程序的项目,是用MPVUE(一个使用 Vue.js 开发小程序的前端框架)做的。其中有做一个详情页面领取优惠券的功能。点击领取按钮,优惠券列表从底部滑出,有一个半透明的遮罩层,然后列表这块是可以滚动的,一切都没有问题,但是小萌手残,拖动了下底层页面,发现底层body的内容也是可以滚动的,然后小萌就去参考了下京东、小黄车的小程序,他们的也是有这个问题的,但是吧,产品需求是不要底层这部分的滚动的,而且用户的?#35805;?#20064;惯也是这样的,然后就改呗……

                    尝试方法一:

                    当蒙层显示时,为了符合各种机型的“解析方式”,给HTML和body都添加样式:

                    body{
                        height: 100%;
                        overflow: hidden;
                    }
                    

                    蒙层消失时,移除以上样式。

                    你以为就这么简单的解决这个问题了嘛?如果是,只能说是你太天真了,这个方法兼容性很不好,适用于pc,然而移动端就尴尬了,在手机上并没有什么卵用。该怎么滚还是怎么滚……压根不受你所写代码的任何限制,你说气人不?

                    尝试方法二:

                    既然我们使用vue的语法来写代码的,那不如我们用vue的方式来解决下这个问题。vue提供的 @touchmove.prevent 方法可以用来阻止滑动,有童鞋说这个方法可以完美解决这个问题,然后我就兴冲冲的把这个方法添加到我的页面当?#23567;?/p>

                    当我满怀期待以为问题就这样迎刃而解的时候,我又发现了一个新的问题,就是这个方法对其内的子div的滑动事件也禁止掉了,这样会导致蒙层部分也是无法滑动的。如果没有蒙层部分的滑动需求,用 @touchmove.prevent 实现是一个很好的方法,但是我有这个需求呀,苍了个天┌? o □ o ?┐

                    这个方法也并没有童鞋说的那么完美嘛……

                    尝试方法三:

                    解决这个问题的晚上在公司加班,改各种bug,因为第二天要上线一部?#27490;?#33021;。然后小呆放心不下,怕我下班太晚,就在公司这里的休息区等我,然后我给小呆送吃的时候就问了问小呆,小呆说这个问题你直接用定位解决吧,最靠谱的,其他的有些方法,安卓机会坑死你的……

                    然后我就想,用定位也是一个办法,然后就用定位试了试,当点击显示蒙层时,为body添加样式:

                    body{
                        position:fixed;
                        top:0;
                        height: 100%;
                        overflow: hidden;
                    }
                    

                    在关闭弹出层时,去掉这段样式就可以了。

                    哎,你还别说,这个方法真的有效,底层的内容不会滚动了。问题解决了,然后就是还有一个细节要考虑,就是将页面定位后,内容会回到头部最顶端,如有需要,这里我们需要记录一下,当取消蒙层时同步top值。

                    文章到这里就没有了,回归后的第一篇文章,“简陋”了点,希望对需要的朋友有帮助哦,:??(?′?`)??: 学习使我进步

                    拜拜┏(^0^)┛

                    觉得本文不错,打赏作者。

                    欢迎加入JavaScript-WEB前端群:JavaScript-WEB前端群

                    ?#19981;?) or
                    曹小萌

                    曹小萌(共52篇文章)

                    你要相信:越努力,越?#20197;恕?#20320;的负担将变成礼物,你受的苦将照亮你的路。

                    最新文章

                    ?#35753;?#25991;章

                    标签云

                    冰球比赛举办

                    <div id="thlxa"></div>

                      <dl id="thlxa"><ol id="thlxa"></ol></dl>

                      <div id="thlxa"></div>

                      <sup id="thlxa"></sup>
                      <dl id="thlxa"></dl>
                      <em id="thlxa"></em>

                      <sup id="thlxa"><menu id="thlxa"></menu></sup>

                        <dl id="thlxa"></dl>

                        <div id="thlxa"></div>

                        <dl id="thlxa"><ins id="thlxa"></ins></dl>
                        <sup id="thlxa"></sup>

                          <dl id="thlxa"></dl>

                          <dl id="thlxa"><menu id="thlxa"><form id="thlxa"></form></menu></dl>

                          <em id="thlxa"></em>

                            <sup id="thlxa"><menu id="thlxa"></menu></sup>
                            <div id="thlxa"><ol id="thlxa"></ol></div>

                              <em id="thlxa"></em>

                                  <dl id="thlxa"><menu id="thlxa"><small id="thlxa"></small></menu></dl><sup id="thlxa"><menu id="thlxa"></menu></sup>
                                    <div id="thlxa"><tr id="thlxa"></tr></div>

                                      <div id="thlxa"><ol id="thlxa"></ol></div>

                                      <div id="thlxa"><ol id="thlxa"><mark id="thlxa"></mark></ol></div>

                                      <div id="thlxa"></div>

                                        <dl id="thlxa"><ol id="thlxa"></ol></dl>

                                        <div id="thlxa"></div>

                                        <sup id="thlxa"></sup>
                                        <dl id="thlxa"></dl>
                                        <em id="thlxa"></em>

                                        <sup id="thlxa"><menu id="thlxa"></menu></sup>

                                          <dl id="thlxa"></dl>

                                          <div id="thlxa"></div>

                                          <dl id="thlxa"><ins id="thlxa"></ins></dl>
                                          <sup id="thlxa"></sup>

                                            <dl id="thlxa"></dl>

                                            <dl id="thlxa"><menu id="thlxa"><form id="thlxa"></form></menu></dl>

                                            <em id="thlxa"></em>

                                              <sup id="thlxa"><menu id="thlxa"></menu></sup>
                                              <div id="thlxa"><ol id="thlxa"></ol></div>

                                                <em id="thlxa"></em>

                                                    <dl id="thlxa"><menu id="thlxa"><small id="thlxa"></small></menu></dl><sup id="thlxa"><menu id="thlxa"></menu></sup>
                                                      <div id="thlxa"><tr id="thlxa"></tr></div>

                                                        <div id="thlxa"><ol id="thlxa"></ol></div>

                                                        <div id="thlxa"><ol id="thlxa"><mark id="thlxa"></mark></ol></div>