小程序自定义遮照 mask 禁止上下滑动

最新推荐文章于 2024-09-19 14:00:47 发布

原创最新推荐文章于 2024-09-19 14:00:47 发布 · 865 阅读

1 ·

CC 4.0 BY-SA版权

mpvue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种解决在页面上添加带有灰度效果的提示框时，防止底层页面内容跟随滚动的方法。通过调整CSS样式，特别是设置'page'元素的'overflow-y'属性为'hidden'，可以有效避免这一问题。

要写一个提示框，有灰度，放到正常页面最外层。发现上下滑动，里层的页面也会跟着上下动，其实只需要再设置一下page的属性就行了。

<style lang="less" scoped>
  .verify-mask {
    z-index: 99999;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: black;
    opacity: 0.4;
    overflow: hidden;
  }
</style>

<style lang="less">
  page {
    height: 100%;
    overflow-y: hidden;
  }
</style>