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>
        )
      }
    }
    
    
  • 相关阅读:
    【杂谈】操作系统如何有效地掌控CPU
    【API知识】一种你可能没见过的Controller形式
    【详解】Tomcat是如何监控并删除超时Session的?
    【API知识】RestTemplate的使用
    【杂谈】Tomcat 之 Lifecycle接口
    【杂谈】FilterChain相关知识整理
    【杂谈】Remember-Me的实现
    【杂谈】没有公网IP的电脑如何与外部通信
    【杂谈】tocmat是何时写回响应数据报的
    js的class基础
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/11154706.html
Copyright © 2011-2022 走看看