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. MySQL Error--Got error 28 from storage engine

    问题描述执行查询或SHOW命令,返回错误信息:Got error 28 from storage engine 问题原因临时文件所在磁盘空间已满 解决办法1.使用df -lh查看磁盘空间使用情况;2. ...

  2. Linux 连接mysql

    连接MYSQL: 格式: mysql -h主机地址 -u用户名 -p用户密码 1.例1:连接到本机上的MYSQL 找到mysql的安装目录,一般可以直接键入命令mysql -uroot -p,回车后提 ...

  3. Flagr 配置说明

    说明文档来自官方文档 https://checkr.github.io/flagr/#/flagr_env 完整配置 包含了组件的配置参数以及说明,对于学习如何使用Flagr 还是很重要的,包含了数据 ...

  4. iproute

    iproute之tc命令翻译地址,man tc的翻译 http://blog.csdn.net/ysdaniel/article/details/7905879

  5. servlet中的request和response

    request对象 1.什么是请求 a.浏览器向服务器发送数据就是请求. 一.request功能1--获取数据 1.获取浏览器相关的信息 getRequestURL方法 -- 返回客户端发出请求完整U ...

  6. 【转】百度UEditor控件中的map组件不支持https使用的问题解决

    原文地址:https://blog.csdn.net/stacy06/article/details/82626363 最近项目部署到了https环境下,使用的UEditor富文本编辑器中的map组件 ...

  7. Base64字符 转图片乱码问题

    网站做了个随机验证码图片功能,遇到了一个奇怪的问题——Base64字符集转图片乱码问题,问题描述如下 1.用java画笔将随机验证码绘制成图片 2.再将图片的二进制代码转换成Base64字符集,返回给 ...

  8. eclipse中解决git分支合并冲突

    冲突场景: 在master分支上有文件student.py. 在master上增新一个dev分支 在dev分支上修改文件student.py.增加函数def d():,并commit; 在master ...

  9. 【Oracle】group by 和partition by的区别

    总结: group 单纯分组 partition 也能分组,但还具备累计的功能 order by 排序,与计算函数联用,需要累加计算 0.select * from test;     ---测试数据 ...

  10. 拓展abaqus python 模块

    abaqus python 本身自带一些模块: 在安装路径:\\SIMULIA\Abaqus\6.14-1\tools\SMApy\python2.7\Lib\site-packages和另外一个2. ...