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>
        )
      }
    }
    
    
  • 相关阅读:
    POJ 1631 Bridging signals
    POJ 1451 T9
    企业应用架构模式阅读笔记3
    论面向服务架构设计及其应用
    软件质量属性-可测试性
    企业应用架构模式阅读笔记2
    企业应用架构模式阅读笔记1
    QTP安装与破解
    Android studio打不开,双击没有反应,已解决
    hibernate框架的基本原理及实例
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/11154706.html
Copyright © 2011-2022 走看看