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. Fish 下报错 Unsupported use of '||'. In fish, please use 'COMMAND; or COMMAND'.

    在用fish激活virualenv虚拟环境时,使用命令: source ./venv/bin/activate 报错 ./venv/bin/activate (line 23): Unsupporte ...

  2. JAVA基础搬运工

    1Java线程的6种状态及切换 https://blog.csdn.net/pange1991/article/details/53860651/ 2进程和线程的区别 https://www.cnbl ...

  3. git 与 ftp 共同工作

    因git主要用于版本管理,代码同步方面,因临时调试等原因,需要使用ftp上传文件. 但因为git的账户为ubuntu,ftp是虚拟账户overlord 导致文件权限不同,出现的问题主要有: 1.ftp ...

  4. Linux系统时间的设置

    1. Linux系统时间的设置 在Linux中设置系统时间,可以用date命令: //查看时间[root@node1 ~]# dateTue Feb 25 20:15:18 CST 2014//修改时 ...

  5. js 父类选择前后差异

    $(this).parent().prev().text(""); $(this).parent().text(""); 如果这俩个顺序调换则再使用prev() ...

  6. (转)Android之发送短信的两种方式

    https://www.cnblogs.com/dongweiq/p/4866022.html if(TextUtils.isEmpty(number)||TextUtils.isEmpty(cont ...

  7. 在ubuntu下装python3.6

    Ubuntu 14.04 and 16.04 If you are using Ubuntu 14.04 or 16.04, you can use J Fernyhough's PPA at htt ...

  8. Ubuntu16.04安装Python3.6 和pip（python3 各版本切换）

    安装: sudo add-apt-repository ppa:jonathonf/python-3.6 sudo apt-get update sudo apt-get install python ...

  9. catkin-make: command not found 错误解决

    参考网址:https://answers.ros.org/question/212492/catkin_make-command-not-found/ zc@ubuntu:~ $ source /op ...

  10. 20175311 2018-2019-2 《Java程序设计》第五周学习总结

    20175311 2018-2019-2 <Java程序设计>第5周学习总结 教材学习内容总结 抽象类和具体类的区别在于抽象类中有抽象方法而具体类中没有.且抽象类不能实例化. 接口:如果一 ...