Web移动端Fixed布局的解决方案

时间 2019-11-06

标签 web 移动 fixed 布局解决方案栏目 HTML 繁體版

原文原文链接

iOS下的 Fixed + Input BUG现象

让咱们先举个栗子，最直观的说明一下这个 BUG 的现象。常规的 fixed 布局，可能使用以下布局（如下仅示意代码）：web

<body class="layout-fixed">
    <!-- fixed定位的头部 -->
    <header>

    </header>

    <!-- 能够滚动的区域 -->
    <main>
        <!-- 内容在这里... -->
    </main>

    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

对应的样式以下：浏览器

header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    margin-top: 50px;
    margin-bottom: 34px;
    height: 2000px
}

而后看起来就是下面这个样子。拖动页面时 header 和 footer 已经定位在了对应的位置，目测没问题了。工具

但接下来问题就来了！若是底部输入框软键盘被唤起之后，再次滑动页面，就会看到以下图所示：布局

咱们看到 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了！测试

这是为何呢？简单解释下： ** 软键盘唤起后，页面的fixed 元素将失效（即没法浮动，也能够理解为变成了absolute定位），因此当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了**。this

这即是 iOS 上 fixed 元素和输入框的 bug 。其中不只限于 type=text 的输入框，凡是软键盘（好比时间日期选择、select 选择等等）被唤起，都会遇到一样地问题。3d

虽然 isScroll.js 能够很好的解决 fixed 定位滚动的问题，可是不在万不得已的状况下，咱们尽可能尝试一下不依赖第三方库的布局方案，以简化实现方式。这里抛砖引玉做为参考。code

解决思路：

既然在 iOS 下因为软键盘唤出后，页面 fixed 元素会失效，致使跟随页面一块儿滚动，那么假如——页面不会过长出现滚动，那么即使 fixed 元素失效，也没法跟随页面滚动，也就不会出现上面的问题了。blog

那么按照这个思路，若是使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变，代码以下：事件

<body class="layout-scroll-fixed">
    <!-- fixed定位的头部 -->
    <header>

    </header>

    <!-- 能够滚动的区域 -->
    <main>
        <div class="content">
        <!-- 内容在这里... -->
        </div>
    </main>

    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

CSS:

header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之能够滚动 */
    overflow-y: scroll;
}

main .content {
    height: 2000px;
}

这样再来看一下：

在原始输入法下， fixed 元素能够定位在页面的正确位置。滚动页面时，因为滚动的是 main 内部的 div，所以 footer 没有跟随页面滚动。

上面貌似解决了问题，可是若是在手机上实际测试一下，会发现 main 元素内的滚动很是不流畅，滑动的手指松开后，滚动马上中止，失去了本来的流畅滚动特性。百度一下弹性滚动的问题，发如今 webkit 中，下面的属性能够恢复弹性滚动。

-webkit-overflow-scrolling: touch;

在 main 元素上加上该属性，嗯，丝般顺滑的感受又回来了！

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之能够滚动 */
    overflow-y: scroll;
    /* 增长该属性，能够增长弹性 */
    -webkit-overflow-scrolling: touch;
}

另外，这里的 header 和 footer 使用的是 fixed 定位，若是考虑到更老一些的 iOS 系统不支持 fixed 元素，彻底能够把 fixed 替换成 absolute 。测试后效果是同样的。

至此一个不依赖第三方库的 fixed 布局就完成了。

Android 下布局

谈到了 iOS ，也来简单说一下 Android 下的布局吧。

在 Android2.3+ 中，由于不支持 overflow-scrolling，所以部分浏览器内滚动会有不流畅的卡顿。可是目前发如今 body 上的滚动仍是很流畅的，所以使用第一种在 iOS 出现问题的 fixed 定位的布局就能够了。

若是须要考虑 Android2.3 如下系统，由于不支持 fixed 元素，因此依然要须要考虑使用 isScroll.js 来实现内部滚动。

其实在 fixed 和输入框的问题上，基本思路就是：因为 fixed 在软键盘唤起后会失效，致使在页面能够滚动时，会跟随页面一块儿滚动。所以若是页面没法滚动，那么 fixed 元素即便失效，也不会滚动，也就不会出现 bug 了。

因此能够在这个方面去考虑解决问题。

其余的一些细节处理

在细节处理上，其实还有不少要注意的，挑几个实际遇到比较大的问题来讲一下：

有时候输入框 focus 之后，会出现软键盘遮挡输入框的状况，这时候能够尝试 input 元素的 scrollIntoView 进行修复。
在 iOS 下使用第三方输入法时，输入法在唤起常常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。
有些第三方浏览器底部的工具栏是浮在页面之上的，所以底部 fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不一样的浏览器，调整 fixed 元素距离底部的距离。
最好将 header 和 footer 元素的 touchmove 事件禁止，以防止滚动在上面触发了部分浏览器全屏模式切换，而致使顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。
在页面滚动到上下边缘的时候，若是继续拖拽会将整个 View 一块儿拖拽走，致使页面的“露底”。

为了防止页面露底，能够在页面拖拽到边缘的时候，经过判断拖拽方向以及是否为边缘来阻止 touchmove 事件，防止页面继续拖拽。

以上面内滚动 layout-scroll-fixed 布局为例，给出一段代码做为参考：

// 防止内容区域滚到底后引发页面总体的滚动
var content = document.querySelector('main');
var startY;

content.addEventListener('touchstart', function (e) {
    startY = e.touches[0].clientY;
});

content.addEventListener('touchmove', function (e) {
    // 高位表示向上滚动
    // 底位表示向下滚动
    // 1允许 0禁止
    var status = '11';
    var ele = this;

    var currentY = e.touches[0].clientY;

    if (ele.scrollTop === 0) {
        // 若是内容小于容器则同时禁止上下滚动
        status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
    } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
        // 已经滚到底部了只能向上滚动
        status = '10';
    }

    if (status != '11') {
        // 判断当前的滚动方向
        var direction = currentY - startY > 0 ? '10' : '01';
        // 操做方向和当前容许状态求与运算，运算结果为0，就说明不容许该方向滚动，则禁止默认事件，阻止滚动
        if (!(parseInt(status, 2) & parseInt(direction, 2))) {
            stopEvent(e);
        }
    }
});