zoukankan      html  css  js  c++  java
  • 头部固定下面滑动&&获取手机屏高

    height(){
    //获取屏高

    let phone_height = document.documentElement.clientHeight;
        let group = this.refs.search;
    //console.log(group,phone_height);
    //40px 是顶部固定区域的高度 
        group.style.height = (phone_height - 40) + 'px' ;
    }

    <div className="search-page-container">
    <div className="search-input-box">
    <input
    type="text"
    className="search-input"
    placeholder="请输入问题关键词"
    ref="search"
    onKeyUp={this.search}
    />
    </div>
    </div>
     
    <section className="search-group" ref="search">
    //滚动区域高度
    </section>

    <style>
    .search-page-container{
    100%;
    height: 100%;
    color: #333;
    -webkit-appearance: none;
    }

    .search-input-box{
    position: absolute;
    94%;
    padding: 6px 3%;
    background-color: #2d4486;
    z-index: 10;
    }
    .search-group {
    position: relative;
    background: #f5f5f5;
    font-size: 14px;
    margin: 0;
    margin-top: 40px;
    100%;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性,可以增加弹性,是滑动更加顺畅 */
    -webkit-overflow-scrolling: touch;
    }
    </style>
     
  • 相关阅读:
    git init 与 git init --bare 区别
    python_集合_笔记
    git笔记
    screen命令
    python的and和or优先级
    计算机语言的发展史
    python3颜色输出
    mysql_windows解压包安装
    那些经常不开心的上班族
    mysql主从搭建
  • 原文地址:https://www.cnblogs.com/y-lin/p/5778834.html
Copyright © 2011-2022 走看看