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. Go实例解析

    Go语言包的加载顺序如图 可以通过如下实例详细了解 代码来源于<Go实战> 代码地址:https://github.com/goinaction/code 项目代码结构 程序架构 首先分析 ...

  2. CodeForce Div 2 C. Masha and two friends

    题目链接: http://codeforces.com/contest/1080/problem/C 思路:双向延长两个矩形方块的4边,会形成一个被分割为9块的更大立方体. 计算所有的9个方框.方框中 ...

  3. Oracle Base64加解密

    参考 http://blog.csdn.net/liuzhigang1237/article/details/7591439

  4. win10刻录光盘失败，一直显示有准备好写入到光盘中的文件

    这是因为前面刻录留下的缓存导致的 解决方法是,删除系统刻录缓存文件 刻录缓存路径大概在以下位置(其中ase那个地方需要修改,改成自己的登录用户账号名即可) C:\Users\ase\AppData\L ...

  5. Hibernate运行原生sql并将查询的结果转化为对象

    原生SQL查询执行的控制是通过SQLQuery接口进行的,通过执行Session.createSQLQuery()获取这个接口.下面来描述如何使用这个API进行查询.标量查询(Scalar queri ...

  6. SpringMVC Mybatis Spring

    Spring MVC Mybatis整合过程中 Mapper.java 不需要使用 @componenet, Service 等spring注解 但是在service 中创建mapper对象的时候是需 ...

  7. vue-cli环境配置

    1.安装npm 从node.js官网下载并安装node node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了. npm包管理器,是集成在node中的,所以安装了node也就 ...

  8. Win10系统下Anaconda下安装多种Python函数库

    建议直接安装Anaconda,这是一个包含Numpy,Pandas,Sklearn等函数库的计算机科学软件包,下面的软件可以在此环境下进行安装下载. 一.计算机视觉 1. OpenCV图像处理 在ht ...

  9. 微软AD相关操作的免费工具

    https://www.ittsystems.com/best-free-active-directory-tools/

  10. 系统右键菜单（级联菜单）资料--cascading menus

    通过RegistryKey 简单的实现单级菜单 http://www.cnblogs.com/sjcatsoft/archive/2009/02/25/1398203.html 通过subcomman ...