list之flex布局写法

移动端实际场景中经常会遇到将header置顶，然后下面list需要滚动的情况，通常的做法会是将header使用fixed的方式固定到顶部，然后list主体相对于header的位置设置marginTop或者position的定位，这样的话做起来感觉有点别扭，也不贴合移动端的布局，而且position:fixed定位会在IOS8以下发生抖动现象，所以使用flex布局最佳。

    如果要禁用IOS的橡皮筋效果，可以使用下面橡皮筋禁止方法，也可以借用[inobounce](https://github.com/lazd/iNoBounce)库处理。

    .root的样式设置也可以替换为html和body设置height: 100%的方式处理，少写一个div标签，但是个人觉得这样的处理直接动html根标签不太合适，而且可控性不好，所以没有写出来。


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .root {

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

        }

        .flexbox {

            display: flex;

            flex-direction: column;

            height: 100%;

        }

        header,

        footer {

            text-align: center;

            background-color: lightblue;

        }

        section {

            flex: 1;

            overflow: auto;

            -webkit-overflow-scrolling: touch;

        }

        section div:nth-of-type(2n) {

            background-color: lightcyan;

        }

    </style>

</head>

<body>

    <div class="root">

        <div class="flexbox">

            <header>Header</header>

            <section id="scroller">

                <div>0</div>

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

                <div>5</div>

                <div>6</div>

                <div>7</div>

                <div>8</div>

                <div>9</div>

                <div>0</div>

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

                <div>5</div>

                <div>6</div>

                <div>7</div>

                <div>8</div>

                <div>9</div>

                <div>0</div>

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

                <div>5</div>

                <div>6</div>

                <div>7</div>

                <div>8</div>

                <div>9</div>

            </section>

            <footer>Footer</footer>

        </div>

    </div>

    <script>

        // 橡皮筋禁止效果

        let startY;

        const scroller = document.getElementById('scroller');

        document.addEventListener('touchstart', e => {

            startY = e.touches[0].pageY;

        });

        document.addEventListener('touchmove', e => {

            const endY = e.touches[0].pageY;

            // 顶端不下滑

            if (endY > startY && scroller.scrollTop === 0) {

                e.preventDefault();

            }

            // 底端不上滑

            if (endY < startY && scroller.scrollHeight - scroller.clientHeight === scroller.scrollTop) {

                e.preventDefault();

            }

        }, {passive: false}); // 加passive是为了兼容部分IOS

    </script>

</body>

</html>

list之flex布局写法的更多相关文章

  1. Flex布局新旧混合写法详解（兼容微信）

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  2. Flex布局新写法兼容写法详解

    很久之前用过flex,但是没有考虑过兼容性问题,为了兼容ios一定要加上-webkit前缀: ul{ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ ...

  3. Flex 布局新旧混合写法详解（兼容微信）

    flex 是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 flex 的支持都 ...

  4. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  5. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  6. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  7. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. Flex 布局2

    Flex 布局2     你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Sch ...

随机推荐

  1. django中云存储静态文件

    Django自带文件存储系统存储在本地文件夹,如果我们将文件存储在云端,需要自定义文件存储系统. 自定义文件存储系统需要继承django.core.files.storage.Storage from ...

  2. PHP之Trait详解

    php从以前到现在一直都是单继承的语言,无法同时从两个基类中继承属性和方法,为了解决这个问题,php出了Trait这个特性 用法:通过在类中使用use 关键字,声明要组合的Trait名称,具体的Tra ...

  3. LOJ 3089 「BJOI2019」奥术神杖——AC自动机DP+0/1分数规划

    题目:https://loj.ac/problem/3089 没想到把根号之类的求对数变成算数平均值.写了个只能得15分的暴力. #include<cstdio> #include< ...

  4. MPU9250九轴陀螺仪--读接口数据

    1.使用i2c链接到树莓派的scl , sda 接口vcc给3v引脚,gnd接树莓派gnd就ok. 2.要操作mpu必须使用mpu的寄存器实现对参数的设定以及读取,取官方下载资料看了一下,在githu ...

  5. GRE配置教程——华为设备

    GRE隧道是通过隧道两端的Tunnel接口建立的,所以需要在隧道两端的设备上分别配置Tunnel接口.对于GRE的Tunnel接口,需要指定其协议类型为GRE.源地址或源接口.目的地址和Tunnel接 ...

  6. 作业---修改haproxy配置文件

    #查询 f=open("C:\\aaaaaaaaaaaaa\\haproxy.txt", "r", encoding="utf-8") ha ...

  7. 迅速的说清楚rpc原理

    第一个问题是服务提供者进程如果被kill -9暴力杀死,不能主动调用srem命令怎么办? 这个时候服务列表中多了一个黑地址指向了不存在的服务而消费者完全不知道,这个时候服务中介就成了黑中介了.那该怎么 ...

  8. webRTC中音频相关的netEQ（五）：DSP处理

    上篇(webRTC中音频相关的netEQ(四):控制命令决策)讲了MCU模块是怎么根据网络延时.抖动缓冲延时和反馈报告等来决定给DSP模块发什么控制命令的.DSP模块根据收到的命令进行相关处理,处理简 ...

  9. selenium 目录结构解释

    common目录         定义了通用的异常类 webdriver目录 android.backberry.chrome.edge.firefox.ie.opera.phantomjs.safa ...

  10. centos7安装mysql，以及设置root密码

    1.首先进入mysql官网的下载-社区https://dev.mysql.com/downloads/ 2.点击下载后,切换版本5.7(这里的版本对于rpm没有作用),然后在新的页面中选择操作系统 3 ...