zoukankan      html  css  js  c++  java
  • 蒙版下层的内容会随滚屏事件滚动的解决方案

    这个功能在移动端会使用频繁,尤其是在模拟一些选中类交互中。本文以 ReactJS 为例书写,其他框架核心理念一致。主要在于设置 body 的 overflow 属性为 hidden 即可。
    设置蒙版的 CSS 代码如下:

    .wrapper-content {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #000000;
      opacity: .4;
      color: #ffffff;
    }
    

    页面显示和事件的代码如下:

    import React, { Component } from 'react'
    import './style.css'
    
    export default class Mask extends Component{
      constructor(props) {
        super(props)
        this.state = {
          mask: false
        }
      }
    
      changeMask = () => {
        this.setState({
          mask: true
        })
        var body = document.querySelector('body')
        body.style.overflow = 'hidden'
      }
    
      handleHiddenMask = () => {
        this.setState({
          mask: false
        })
        var body = document.querySelector('body')
        body.style.overflow = ''
      }
    
      render() {
        return (
          <div className = 'wrapper'>
            <div className = 'wrapper-main'>
              <div onClick = {this.changeMask}>open mask</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
              <div>content</div>
            </div>
            <div className = {this.state.mask ? 'wrapper-content' : ''}>
                <div onClick = {this.handleHiddenMask}>close</div>
            </div>
          </div>
        )
      }
    }
    
    
  • 相关阅读:
    senrty 配置Email
    pip安装使用详解
    C_FORCE_ROOT linux环境变量设置
    Supervisord管理
    解决外部机器通过VM内ubuntu IP 无法访问vm内web服务的问题
    C# 使用Nlog记录日志到数据库 使用LogEventInfo类获取,命名空间名称、类名、方法名
    godaddy.com 注册域名 买卖域名
    vue-15-vuex-store的用法
    vue-14-less 语法的使用
    vue-13-swiper组件的使用
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/11154706.html
Copyright © 2011-2022 走看看