zoukankan      html  css  js  c++  java
  • list之flex布局写法及禁止橡皮筋效果

    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>
    
  • 相关阅读:
    Head First Java pdf下载
    【ARC068F】Solitaire(dp,计数,思维)
    【BZOJ3270】博物馆(概率dp,高斯消元)
    【BZOJ3143】【HNOI2013】游走(期望dp,高斯消元)
    【BZOJ3622】已经没什么好害怕的了(dp,容斥原理,二项式反演)
    【BJWC2018】上学路线(dp,Lucas,crt)
    【BZOJ4987】Tree(树形dp)
    【SDOI201】黑白棋 /【XSY3064】小奇的博弈(博弈,nim,dp,组合数)
    【HNOI2017】礼物(FFT)
    【BZOJ2502】清理雪道(最大费用最大流)
  • 原文地址:https://www.cnblogs.com/ljwk/p/10246392.html
Copyright © 2011-2022 走看看