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. Python error: Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall.bat)解决方案

    error: Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall.bat). Get it - 解决方案 python通过pi ...

  2. gcc and g++ 常用参数解释

    程序编译运行的过程 预处理.处理一些#include,#define命令,生成.i或者.ii文件: 编译.编译器进行语法分析,语义分析,中间代码生成,目标代码生成,优化,生成.s文件 汇编.汇编器把汇 ...

  3. WinForm关于更新程序的设计思路

    开发WINDOWS应用程序一般都会有一个自动更新的功能,这就需要提供一个单独的更新程序来更新主程序,那么主程序怎么检测是否有更新,以及更新程序怎么去更新主程序呢?下面将分开研究分析. 用VS发布向导发 ...

  4. linux 域名解析

    vi /etc/hosts  中添加ip地址和域名  111.111.111.111   aa.swddjtc.cn   然后重启 /etc/init.d/network restart

  5. rust 如何搜索,如何debug （解决）

    requirement c程序可以用手动查看.h文件获得定义,或者用dumpbin分析lib或者dll获得二进制信息. 但是rust如何得到库的定义呢? rust如何查看函数定义? rust如何deb ...

  6. 廖雪峰Git入门教程

    廖雪峰Git入门教程  2018-05-24 23:05:11     0     0     0 https://www.liaoxuefeng.com/wiki/00137395163059296 ...

  7. IDEA 代码生成插件 CodeMaker

    Java 开发过程中经常会遇到编写重复代码的事情,例如说:编写领域类和持久类的时候,大部分时候它们的变量名称,类型是一样的,在编写领域类的时候常常要重复写类似的代码.类似的问题太多……这里介绍一个 I ...

  8. ZoomIt: 非PPT演示必备辅助软件

    下载地址:https://docs.microsoft.com/zh-cn/sysinternals/downloads/zoomit 使用方法: 另一个免费的屏幕标注工具:Pointofix v1. ...

  9. 无法生成core dump文件的几个原因

    1. 进程无写权限(如目录不可写.存在同名的非regular文件(目录或符号链接)等) 2. 存在同名文件且有多个hard link 3. 文件系统空间不足 4. 指定目录不存在 5. 进程的RLIM ...

  10. 项目中使用package-lock.json锁版本问题

    package-lock.json的作用: 锁版本,确保项目在后续拉去中,安装依赖包时依赖包的版本始终是统一的 在npm install时会自动生成package-lock.json package. ...